自定义光标：用代码解锁数字掌控力

javascript

2024-03-10 02:13:44

自定义光标：释放你的数字掌控力

打破浏览器的局限，塑造独一无二的光标

在数字世界的汪洋中，光标是连接你与计算机界面的一座桥梁。然而，浏览器提供的默认光标往往单调乏味，难以满足个性化和特殊控制场景的需求。本文将深入探讨如何突破浏览器局限，赋予你的光标超凡能力，让你尽情掌控数字疆域。

WASD 操控，自由驰骋

想象一下，使用 WASD 键像操控角色一样操控光标。按下 W，光标向上移动；按下 A 和 D，光标左右移动；按下 S，光标向下移动。如此一来，你的光标将成为你手指的延伸，在屏幕上尽情驰骋。

Enter 键激活，轻松点击

当光标停留在某个元素上时，按下 Enter 键即可触发该元素的点击事件。这就像给光标装上了一把神奇的"点按器"，让你无需再费心用鼠标去点击。

自定义光标，彰显个性

摆脱了浏览器的束缚，你可以随心所欲地设计自己的光标。圆形、方形、三角形，甚至是异想天开的爱心，只要你想得到，都可以成为你光标的形状。更重要的是，你可以为光标添加炫酷的动画，让它动感十足，引人注目。

突破 elementFromPoint 的限制

elementFromPoint() 函数可以获取光标所在位置的元素，但它有一个缺陷：只能返回最上层的元素。这意味着，如果你将光标悬停在嵌套元素上，它只会被识别为最外层的元素。

为了解决这个问题，我们可以使用一个名为 "hit-testing" 的技术。hit-testing 允许我们递归地遍历 DOM 树，找到光标真正所在的那个元素，无论它有多么深层嵌套。

实现代码，掌控光标

以下是如何实现自定义光标的代码片段：

const step = 10
export default function Dpad() {
  const [mouse, setMouse] = useState({ x: 300, y: 300 })
  const mousePosRef = useRef(mouse)

  const getElement = useCallback(() => {
    let element = document.elementFromPoint(
      mousePosRef.current.x,
      mousePosRef.current.y
    )
    console.log(element)
  }, [])

  const mouseMove = useCallback(
    (e) => {
      switch (e.key) {
        case "w":
          setMouse((prev) => {
            return { y: prev.y - 1 - step, x: prev.x }
          })
          break

        case "d":
          setMouse((prev) => {
            return { y: prev.y, x: prev.x + 1 + step }
          })
          break

        case "a":
          setMouse((prev) => {
            return { y: prev.y, x: prev.x - 1 - step }
          })
          break

        case "s":
          setMouse((prev) => {
            return { y: prev.y + 1 + step, x: prev.x }
          })
          break

        case "Enter":
          console.log("Click")
          getElement()
          break

        default:
          break
      }
    },
    [getElement]
  )

  useEffect(() => {
    mousePosRef.current = mouse
  }, [mouse])

  useEffect(() => {
    window.addEventListener("keydown", mouseMove, true)
    return () => {
      window.removeEventListener("keydown", mouseMove)
    }
  }, [])

  return (
    <div
      tabIndex={0}
      style={{
        position: "absolute",
        pointerEvents: "none",
        zIndex: 999999,
        background: "red",
        width: "30px",
        height: "30px",
        borderRadius: "50%",
        left: mouse.x,
        top: mouse.y,
      }}
    />
  )
}