更新游标在createjs

Question

我是新来的画布。我正在使用createjs实现一个应用程序。我在画布上放置了一个PNG图像。我想在mosueover上将光标样式更改为'grap'，并且在拖动PNG图像时将光标样式设置为'grapping'。我只想在createjs上做这个。

在此先感谢。

Answer 1

我不确定它已经看起来如何（因此为什么尽可能给出尽可能多的细节很好），所以我会一步一步地做到这一点;

//reference the canvas with: 
var canvas = document.getElementById("yourCanvasID"); 
//create your stage 
var stage = new createjs.Stage(canvas); 
//enable mouse events for the stage 
stage.enableMouseOver(); 
createjs.Touch.enable(stage); 

我假设你已经加载了图像，并且引用了一个变量，但尚未添加到页面。假设它叫做image。 你可以从它创建位图图像：

var bitmap = new createjs.Bitmap(image); 

然后将其添加到舞台

stage.addChild(bitmap); 

之后，你与添加事件侦听到新创建的createjs位图对象：

bitmap.addEventListener("mouseover", handleMouse); 
bitmap.addEventListener("mousedown", handleMouse); 
bitmap.addEventListener("pressmove", handleMouse); 
bitmap.addEventListener("pressup", handleMouse); 

然后你定义handleMouse函数里面会发生什么：

var isMouseDown = false; 
function handleMouse(evt) 
{ 
    switch (evt.type){ 
     case "mouseover": 
     //on rolling over the image 
     if (!isMouseDown){ 
      canvas.style.cursor = "pointer"; 
     } 
     break; 
     case "mousedown": 
     //when holding the mouse down; 
     canvas.style.cursor = "move"; 
     isMouseDown = true; 
     break; 
     case "pressmove": 
     //move the image 
     bitmap.x = stage.mouseX; 
     bitmap.y = stage.mouseY; 
     break; 
     case "pressup": 
     //when releasing the mouse click 
     isMouseDown = false; 
     canvas.style.cursor = "pointer"; 
    } 
} 

现在，我不确定是否100％正确，因为它来自我的头顶，但它应该通过在“手”和“移动”指针之间更改鼠标来实现。

Answer 2

答案@catalin给你的答案大多是正确的设置，但添加光标更容易，因为EaselJS supports it natively。

1. 请务必在舞台上登录enableMouseOver()。这可确保EaselJS检查鼠标下的内容。这可能是昂贵的，因此在任何不需要鼠标交互的事情上关闭mouseEnabled和mouseChildren是明智的。

2. 将cursor属性添加到任何想要获得游标的属性。

就是这样！

var stage = new createjs.Stage("canvasId"); 
stage.enableMouseOver(); 

var bmp = new createjs.Bitmap("path/to/image.png"); 
stage.addChild(bmp); 
bmp.cursor = "pointer"; 

干杯。