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();

这是一个快速的小提琴：http://jsfiddle.net/xnn803sx/