html拖动圆纽改变,绘制一个可拖动的圆圈，其中心信息使用easeljs动态更改 - html5代码 - 源码查...

问题

I am trying to display co-ordinate of the circle that is created with double click within the canvas. I could do this task but when I drag the circle the want the co-ordinate information to be changed.This information got changed but co-ordinate info that was displayed before are still there. How to display only the current information. Please help. You can check it live on: http://codepen.io/bsubba/pen/rxXXMa

function createCircle(x,y,r,stroke,id){

var circle = new createjs.Shape();

circle.graphics.setStrokeStyle(4).beginStroke(stroke).drawCircle(0, 0, r);

circle.x = x;

circle.y = y;

circle.name = "circle";

circle.id = id;

circle.on("pressmove",drag);

var text = new createjs.Text("("+x+","+y+")","13px Arial","#000000");

text.name = "coordinate";

text.textAlign = "center";

text.textBaseline = "middle";

text.x = x;

text.y = y-25;

stage.addChild(circle, text);

}

//display co-ordiates of the circle

function displayText(x,y,str){

var text = new createjs.Text(str, "13px Arial", "#000000");

text.name = "coordinate";

text.textAlign = "center";

text.textBaseline = "middle";

text.x = x;

text.y = y-25;

text.name = "labels";

stage.addChild(text);

}

//Drag function

function drag(evt) {

evt.target.x = evt.stageX;

evt.target.y = evt.stageY;

displayText(evt.stageX,evt.stageY,"("+evt.stageX+","+evt.stageY+")");

stage.update();

}

解决方法

You can change the text via the text property on the existing createjs.Text object. For example:

// save a reference to the text object on your circle object

circle.textObj = text;

//...

function drag(evt) {

evt.target.x = evt.stageX;

evt.target.y = evt.stageY;

// get the existing text object and do some stuff with it

var textObj = evt.target.textObj;

textObj.text = str;

textObj.x = x;

textObj.y = y - 20;

}