更新CreateJS中的游标答案

【问题标题】：Update cursor in createjs更新CreateJS中的游标
【发布时间】：2017-04-05 07:35:03
【问题描述】：

我是画布新手。我正在使用 createjs 实现一个应用程序。我在画布舞台上放置了一张 PNG 图像。我想在鼠标悬停时将光标样式更改为“grap”，并希望在拖动 PNG 图像时光标样式为“grapping”。我只想在 createjs 上执行此操作。

提前致谢。

【问题讨论】：

请看：stackoverflow.com/help/how-to-ask

标签： canvas cursor createjs

【解决方案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% 正确，因为它来自我的头顶，但它应该可以通过在“手”和“移动”指针之间切换鼠标来解决问题。

【讨论】：

您为检测鼠标悬停和更改光标所做的工作是不必要的。查看createjs.com/docs/easeljs/classes/…
啊，这个不错！

【解决方案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";

干杯。

【讨论】：