javascript - 使用 javascript 自定义光标图像

Question

我需要将鼠标光标更改为自定义图像。

如果可能的话，我想在 spritesheet 上做。我不能从 css 做到这一点，因为我在游戏中使用它。我已经知道如何决定何时等等。

我需要知道的是如何将光标变为图像，并确定图像的位置和大小？有没有类似于drawImage的图像位置的简单解决方案？

Answer 1

您可以使用 javascript 设置 CSS 来隐藏光标:

your_canvas.style.cursor = "none"

然后你可以用这样的东西得到光标的位置(它现在是隐藏的):

your_canvas.addEventListener("mousemove", function (ev) {
    var mouseX = ev.pageX - GetTopLeft(your_canvas).Left;
    var mouseY = ev.pageX - GetTopLeft(your_canvas).Top;
});

然后您可以修改您的 Canvas 以在该位置显示您更漂亮的光标 Sprite 。

GetTopLeft 定义如下:

function GetTopLeft(elm){

    var x, y = 0;

    //set x to elm’s offsetLeft
    x = elm.offsetLeft;

    //set y to elm’s offsetTop
    y = elm.offsetTop;

    //set elm to its offsetParent
    elm = elm.offsetParent;

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x
    //offsetTop to y and set elm to its offsetParent

    while(elm != null)
    {

    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
    }

    //here is interesting thing
    //it return Object with two properties
    //Top and Left

    return {Top:y, Left: x};

}

虽然我不记得我从哪里复制了 GetTopLeft 函数...