使用javascript自定義光標圖像

我需要將鼠標光標更改爲自定義圖像。使用javascript自定義光標圖像

如果可能我想在spritesheet上做到這一點。我不能從css做到這一點，因爲我在遊戲中使用它。我已經知道如何決定何時等。

我需要知道的是如何將光標更改爲圖像，並決定圖像的位置和大小？有沒有類似於drawImage的圖像位置的簡單解決方案？

來源

2012-04-03 justanotherhobbyist

你**可以**使用CSS來做到這一點，如果你使用javascript來修改CSS ... – Jon 2012-04-03 05:00:23

我知道我可以在CSS中做到這一點，但如果可能，我寧可不要，正如我在帖子中所說的那樣。 – justanotherhobbyist 2012-04-03 05:03:49

設置光標的CSS是隱藏它的唯一方法。爲什麼你不想使用CSS呢？ – GoldenNewby 2012-04-03 05:06:18

可以使用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; 
});

然後你就可以修改您的畫布以在該位置顯示您的fancier光標精靈。

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功能...

來源

2012-04-03 05:05:02 GoldenNewby

是的，我有一個鼠標在畫布上的位置已準備就緒，只是繪製圖像和你一樣，Mike Depies說這是一個非常優雅的解決方案，我的問題 – justanotherhobbyist 2012-04-03 06:06:33

如果您使用的是帆布，只是隱藏光標移到畫布並在鼠標位置畫布上繪製自己的精靈。

來源

2012-04-03 05:05:04

這是一個很好的簡單的解決方案，我沒有想到。將使用這種方法。 – justanotherhobbyist 2012-04-03 06:05:01

沒問題，祝你的發展順利 – 2012-04-05 00:49:34

使用javascript自定義光標圖像

回答

相關問題