Нарисуйте перетаскиваемый круг, в котором информация о центре динамически изменяется с помощью easeljs.

Question

Я пытаюсь отобразить координату круга, созданного двойным щелчком мыши на холсте. Я мог бы выполнить эту задачу, но когда я перетаскиваю кружок, хочу, чтобы информация о координатах была изменена. Эта информация изменилась, но информация о координатах, которая отображалась ранее, все еще там. Как отображать только актуальную информацию. Пожалуйста помоги. Вы можете проверить это в прямом эфире на: 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();   
}

Answer 1

Вы можете изменить текст через text собственность на существующий createjs.Text объект. Например:

// 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;
}