CODEWITHSUNDEEP
drag-and-dropeaseljs
user3055135
user3055135

Reputation: 13

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

Trying to following the example at http://www.createjs.com/tutorials/Mouse%20Interaction/ , which shows how to drag and drop a shape. Something is going wrong for me. I add a circle when the stage is clicked, then I try to get it's x location... my alert shows a 0, but the circle appears in the right place. Then I try to drag, and the circle moves around, but at a distance from the mouse pointer.

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

Upvotes: 0

Views: 258

Answers (1)

Lanny
Lanny

Reputation: 11294

You are mistaking the shape x/y position with the graphics coordinates. The shape is at [0,0], since you have not changed its x or y position.

Instead, draw the circle at [0,0], and move it to the mouse position.

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

Here is a quick fiddle: http://jsfiddle.net/xnn803sx/

Upvotes: 1

Related Questions