editable Text option in kinetic js

Question

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

This is my current code:

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

I did this some days back on my project. Hare are the code snippets. Basically we first draw the rectangle and then put a text area inside it and finally convert it into kinetic.text node.

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

        },

Answer 2

I've made an attempt for an actual KinetiJS plugin with editable text functionality.

I know it's reinventing the wheel, when you can just hover a textarea, but why not have it only in canvas too.

Check the plugin out at: https://github.com/nktsitas/kineticjs-editable-text

Answer 3

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:

• create a text with your code
• on text click [text.on("click", function...], create an input field right at your mouse cursor

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.

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

var xy = prompt("gimme your text");

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