绘制一个可拖动的圆圈，中心信息使用 easeljs 动态更改

Question

我正在尝试显示在 canvas 中双击创建的圆的坐标。我可以完成此任务，但是当我拖动圆圈时，希望坐标信息为 changed.This 的信息已更改，但之前显示的坐标信息仍然存在。如何只显示当前信息。请帮忙。您可以实时查看：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

您可以通过现有 createjs.Text 对象上的 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;
}

绘制一个可拖动的圆圈，中心信息使用 easeljs 动态更改

Draw a draggable circle with it center information changed dynamically using easeljs

html

geometry

text

drag

easeljs