使用 javascript 动态更改光标原点?

Question

有没有办法通过javascript访问光标，以便您可以定义图像的x，y位置？ 我在 css 中为光标设置了一个自定义数据 uri，我希望能够动态调整偏移量，而无需重新定义整个事情。

body{
cursor: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="1" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 H 6 L 12 12 V 18"/></svg>') 24 24, auto;
}

我将如何通过 javascript 动态设置 x、y？

Answer 1

如果你确实想看看指针锁定，这里有一个无jQuery的实现。

var getPointerLock = () => {
if (document.body.mozRequestPointerLock) {
document.body.mozRequestPointerLock();
} else if (document.body.requestPointerLock) {
document.body.requestPointerLock();
}
};
var x = 0;
var y = 0;
document.body.onclick = (evt) => {
getPointerLock();
x = evt.clientX;
y = evt.clientY;
};
document.body.onmousemove = (evt) => {
if (document.pointerLockElement || document.mozPointerLockElement) {
x += evt.movementX;
y += evt.movementY;
document.body.innerHTML = `${x}, ${y}`;
}
};

html {
height: 100%;
}
body {
height: 100%;
}