如何在启用鼠标悬停的情况下在 EaselJS 中设置光标？

Question

如何在使用 EaselJS 时为 canvas 设置光标？

经过大量调试，我设法找出了有问题的代码：stage.enableMouseOver()。我正在使用 stage.enableMouseOver() 因为我需要能够将鼠标悬停在放置在舞台上的各种元素上。但是，我发现随后尝试为 canvas 设置光标无法执行任何操作。 stage.canvas.style.cursor = "text" 和 stage.cursor = "text" 一样什么也不做。但是，stage.canvas.style.cursor 在 stage.enableMouseOver() 被注释掉时有效。

这不起作用：

var stage = new createjs.Stage("canvas");

stage.enableMouseOver(); // comment out this line to get it to work

$("button").click(function() {
  stage.canvas.style.cursor = "text";
});

<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="change-cursor">
  Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

如何在不删除 stage.enableMouseOver() 的情况下显示我选择的光标？

示例有效，但注释掉了 stage.enableMouseOver():

var stage = new createjs.Stage("canvas");

// stage.enableMouseOver();

$("button").click(function() {
  stage.canvas.style.cursor = "text";
});

<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="change-cursor">
  Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

Answer 1

EaselJS 中有一个 cursor属性，请查看下面的示例：

var stage = new createjs.Stage("canvas");
stage.cursor = 'text';
  
var bgShape = new createjs.Shape();
bgShape.graphics.beginFill("red").drawRect(0, 0, 100, 100);
stage.addChild(bgShape);

stage.enableMouseOver();

#canvas {
  cursor: text;
}

<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>

<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

Answer 2

对于使用 Animate CC 的用户，请在启用鼠标悬停之前设置光标：

stage.cursor="pointer";
stage.enableMouseOver(20);

如何在启用鼠标悬停的情况下在 EaselJS 中设置光标？

How to set the cursor in EaselJS, with mouseover enabled?

javascript

canvas

easeljs

createjs