在画布和/或动力学中创建可拖动文本

Question

此代码在xy坐标处的画布上成功绘制文本：鼠标点击：

function on_canvas_click(ev) {
x = ev.clientX - canvas1.offsetLeft-40;
y = ev.clientY - canvas1.offsetTop;
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText([chosenChord], [x], [y]);
}

我现在想要的是，如果我点击绘图文本，我可以将它拖到画布上。

一个表面上的选择是在kineticjs中创建画布然后使用draggable：true或setDraggable（true），但我无法弄清楚如何在动力学中完成代码的主体。或者，也许有一种拖动文本而不调用动力学的方法。

Answer 1

我建议您使用双击而不是单击，因为KineticJS使用mousedown来指示拖动操作的开始。

您可以听取舞台双击，然后添加可拖动的文字，如下所示：

$(stage.getContent()).on('dblclick', function (event) {
    var pos=stage.getMousePosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var text=new Kinetic.Text({
        x:mouseX,
        y:mouseY,
        text:"@:"+mouseX+"/"+mouseY,
        fill:"blue",
        draggable:true,
    });
    layer.add(text);
    layer.draw();
});

演示：http://jsfiddle.net/m1erickson/tLwSM/