Easeljs：单击时添加到舞台的对象没有 X 值

Question

尝试按照 http://www.createjs.com/tutorials/Mouse%20Interaction/ 中的示例进行操作，该示例显示了如何拖放形状。我出了点问题。单击舞台时我添加了一个圆圈，然后我尝试获取它的 x 位置...我的警报显示 0，但圆圈出现在正确的位置。然后我尝试拖动，圆圈移动了，但与鼠标指针有一段距离。

var stage = new createjs.Stage("demoCanvas")    
stage.on("stagemousedown", function(evt) { 
    var corn = new createjs.Shape()
    corn.graphics.beginFill('white').drawCircle(evt.stageX, evt.stageY, 20).endFill()
    stage.addChild(corn)
    stage.update()
    alert(corn.x)

    corn.on("pressmove", function(dragEvent) { 
        dragEvent.target.x = dragEvent.stageX;
        dragEvent.target.y = dragEvent.stageY;
        stage.update()
    });
})

Answer 1

您将形状 x/y 的位置误认为是图形坐标。形状位于 [0,0]，因为您没有更改其 x 或 y 位置。

相反，在 [0,0] 处绘制圆圈，然后将其移动到鼠标位置。

var corn = new createjs.Shape()
    .set({x:evt.stageX, y:evt.stageY});
corn.graphics.beginFill('green').drawCircle(0,0,20).endFill();

这是一个快速 fiddle：http://jsfiddle.net/xnn803sx/

Easeljs：单击时添加到舞台的对象没有 X 值

Easeljs: Object added to stage on click has no X value

drag-and-drop

easeljs