javascript - EaselJS - 如何访问鼠标移动？

Question

在对象(基于 this tutorial 创建)中，我有以下代码。在此代码中，行:

event.target.x = evt.stageX; 
event.target.y = evt.stageY;

错了。它们应该是什么来访问鼠标移动？:

(function() {
    ....
    var p = createjs.extend(Card, createjs.Container);
    p.setup = function() {
         this.on("pressmove", this.handlePressMove);
         ....
         p.handlePressMove = function (event) {
             event.target.x = evt.stageX; //"Event" is wrong. So is "evt"
             event.target.y = evt.stageY;
             stage.setChildIndex(this, stage.getNumChildren()-1);
             stage.update();
         }
       }
}());

Answer 1

您的代码示例使用 evt.stageX 而不是 event.stageX。所有 MouseEvent 都有一个 stageX 和 stageY，这是鼠标触发事件时所处的位置。我认为您的代码来自 this tutorial它专门使用 evt。

此外，MouseEvents 在 pressMove 事件上有一个 rawX 和 rawY，它们为您提供 Canvas 元素之外的 x/y。 EaselJS MouseEvents 上没有 clientX 或 clientY。

这是一个使用 stageX/stageY 的快速示例。 http://jsfiddle.net/lannymcnie/suva8vt3/

片段:

shape.on("pressmove", function(event) {
    shape.x = event.stageX;
    shape.y = event.stageY;
});