用javascript动态地改变游标的起源？

问题描述：

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

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动态？

你的目标是什么呢？ –

的目标是根据鼠标位置调整偏移量，但我只是意识到它将基于由于mousemove事件延迟导致的滞后位置。我想即使我可以抵消它，它也不会完成我所需要的。 – user3591153

我基本上想要光标捕捉到一个不可见的网格。 – user3591153

答

如果你想看看指针锁定，这里是一个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%; 
}

这是否与mousemove具有相同的延迟问题？ – user3591153

啊，做了一些测试，它确实有相同的延迟。我之所以使用CSS光标是因为它没有视觉延迟。 – user3591153

当指针被锁定时，实际的鼠标被消耗掉，所以普通用户不会注意到任何延迟，因为实际的鼠标位置不会被重绘，这在您的示例中会发生。一旦你计算了新的光标位置，重绘光标完全取决于你。 –

用javascript动态地改变游标的起源？

相关推荐