Question

我是画布的新手。我正在使用createjs实现一个应用程序。我在画布舞台上放置了一个PNG图像。我想将光标样式更改为＆＃39; grap＆＃39;在mosueover上，并希望光标样式为＆＃39; grapping＆＃39;同时拖动PNG图像。我想仅在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。

确保在舞台上enableMouseOver()。这可以确保EaselJS检查鼠标下的内容。这可能很昂贵，因此在任何不需要鼠标互动的事情上关闭mouseEnabled和mouseChildren是明智的。
将cursor属性添加到您想拥有光标的任何内容中。

那就是它！

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

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

干杯。

在createjs中更新游标

2 个答案: