javascript - kinetic js中的可编辑文本选项

Question

我想添加 Textbox 或可编辑元素，让用户可以选择编辑文本。

这是我当前的代码:

var text = new Kinetic.Text({
        text: "Sample Text", ---> i want to edit this text 
        x: 50,
        y: 10,
        fill: "transparent",
        fontSize: 10,
        fontFamily: "Helvetica Neue",
        textFill: "#000",
        align: "center",
        verticalAlign: "middle",
        name:'TEXT'
    });

Answer 1

目前似乎没有任何方法可以使用 Kinetic JS 创建可编辑文本(请参阅 stackoverflow 上的几个主题)，有些人建议使用 Canvas 旁边的输入字段来编辑文本，但我的解决方案将是以下内容:

• 用您的代码创建一个文本
• 在文本上单击 [text.on("click", function...]，在鼠标光标处创建一个输入字段

嗯，这就是计划。也许在输入字段中使用“保存”按钮文本更容易，因此您确切地知道何时关闭它以及何时将输入字段数据存储到 Kinetic 文本中。如果您不想编辑它，您还需要一个“关闭”功能。

一个非常简单的解决方案也是一个简单的 JavaScript 提示:

var xy = prompt("给我你的文本");

所以，这样的事情将是最好的解决方案恕我直言:

myText.on('click', function(evt) {
    this.setText(prompt('New Text:'));
    layer.draw(); //redraw the layer containing the textfield
});