动态js中的可编辑文本选项 [英] editable Text option in kinetic js

问题描述

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

I want to add Textbox or editable element to give the user the option to edit the text.

这是我目前的代码：

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'
    });

推荐答案

此刻似乎没有任何办法使用Kinetic JS创建可编辑的文本（请参阅stackoverflow上的几个相关主题），有些人建议使用画布旁边的输入字段来编辑文本，但我的解决方案如下：

At the moment there does not seem to be any way to create editable text with Kinetic JS (see several threads about this at stackoverflow), some people suggest using an input field next to the canvas to edit the text, but my solution would be the following:

• 使用您的代码创建一个文本


• 在文本上单击[text.on（click，function ...]，创建一个鼠标光标处的输入字段

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

Well, that´s the plan. Maybe it´s easier to use a "save" button text to the input field, so you know exactly when to close it and when to store the input field data to the Kinetic text. you would also need a "close" function if you don´t want to edit it.

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

A very easy solution would also be a simple JavaScript prompt:

var xy = prompt（给我的文本gimme;

所以，这样的东西将是最好的解决方案imh o：

So, something like this would be the best Solution imho:

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

这篇关于动态js中的可编辑文本选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！