Kinetic JS中的可编辑文本选项

Question

我希望添加一个“文本框”或可编辑元素，以提供给用户编辑文本的选项。

这是我的当前代码：

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

- Kiran123

Answer 1

目前在 Kinetic JS 中似乎没有办法创建可编辑文本（请参见 stackoverflow 上的几个线程），一些人建议在画布旁边使用输入字段来编辑文本，但我的解决方案是：

• 使用您的代码创建一个文本
• 在文本单击事件[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
});

- andyrandy

---

我正在使用这种方法进行文本编辑。问题是输入字段随着动力舞台的缩放而缩放。当我使用一个小窗口并将舞台缩放以适应该窗口时，我得到的输入字段仍然很大。你能建议解决方法吗？ - Vrishank

我认为你无法更改JS提示框的外观，因为这是浏览器的特性。另一个解决方案是覆盖一个HTML输入字段，这个可以进行缩放。 - andyrandy

...不过这会需要更多的工作...提示解决方案非常简单。 - andyrandy

我正在尝试在KineticJS中模拟来自ms paint的文本特性。我正在使用输入字段，并将尝试使用缩放功能。谢谢。 - Vrishank

你可以只使用 CSS 来缩放输入字段。 - andyrandy

Answer 2

我尝试创建了一个具有可编辑文本功能的实际KinetiJS插件。

我知道这似乎是重复造轮子，因为你可以悬停在文本区域上进行编辑，但为什么不在画布中呢？

请查看该插件：https://github.com/nktsitas/kineticjs-editable-text

- nktsitas

Answer 3

我几天前在我的项目中做了这个。以下是代码片段。基本上，我们首先绘制矩形，然后在其中放置文本区域，最后将其转换为kinetic.text节点。

             drawText: function ( color )
            {
                var layer1=this.model.stage.getLayers()[0];
                var $this=this;
                console.log('drawText: color: ' + color);

                if($this.rectangleDrawn==true)
                {

                    var down = false, oPoint;
                    layer1.off("mousedown touchstart mousemove touchmove mouseup touchend");
                    if(group!=undefined && group!='')
                    {
                        $this.hideAnchors(group);
                    }
                    console.log("textX: "+textX);
                    //after rectangle is drawn we now have to add the editablesection
                    $('<textarea id="text" type="text"  width='+textWidth +'px height='+textHeight+'px style="font-size: 30px;font-family:Calibri;height:'+textHeight+'px;width:'+textWidth+'px;position:absolute'+';left:'+textX+'px'+';top:'+textY+'px'+';z-index:5'+';background-color:#ffcc00;"></textarea>')

                    .insertBefore('.kineticjs-content');
                    $('#text').on('blur',function()
                    {
                        console.log("textchange");
                        text = new Kinetic.Text( {
                            x: textX,
                            y: textY,
                            stroke: color,
                            strokeWidth: 1,
                            fontSize: 30,
                            fontFamily: 'Calibri',
                            clearBeforeDraw: false,
                            name: 'image'+layer1.getName(),
                            draggable: true,
                            height: textHeight,
                            width: textWidth,
                            text: $('#text').val()
                        } );
                        text.on( 'mouseleave dbltap', function ()
                        {
                            text=this;
                        } );
                        $('#text').remove();

                        layer1.add( text );
                        layer1.draw(); 
                    })
                    },drawRectangle: function ( opacity, colorFill,stroke,textColor ){rect = new Kinetic.Rect({
                    x: mousePos.x,
                    y: mousePos.y,
                    width: 0,
                    height: 0,
                    stroke: stroke,
                    strokeWidth: 4,
                    opacity: opacity,
                    clearBeforeDraw: false,
                    name: 'image'+layer1.getName()
                });
                layer1.on( "mouseup touchend", function ( e )
                {
                console.log("rectangle: mouseup");
                console.log("width: "+rect.getWidth(  ));
                rect.setOpacity(opacity);
                rect.setFill(colorFill);
                layer1.draw();
                    down = false;
                    console.log("textColor: "+textColor)
                    if(textColor!=undefined)
                    {
                        textWidth=rect.getWidth(  );
                        textHeight=rect.getHeight(  );
                        textX = rect.getAbsolutePosition().x;
                        textY=rect.getAbsolutePosition().y;
                        $this.rectangleDrawn=true;
                        $this.drawText(textColor);
                        console.log("textdrawn ");
                        $this.group.remove();
                    }

        },

- Shishir Arora