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

【问题标题】：creating draggable text in canvas and/or kinetic在画布和/或动力学中创建可拖动的文本
【发布时间】：2014-02-04 04:20:06
【问题描述】：

此代码成功地在画布上鼠标点击的 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)，但我不知道如何在 kineticjs 中完成代码主体。或者，也许有一种在不调用动力学的情况下拖动文本的方法。

【问题讨论】：

标签： jquery canvas kineticjs

【解决方案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/

【讨论】：