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.         


        

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
                    $('')

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

        },