Editable version of text in kinetic js

Question

I want to add a Textbox or an editable element to give the user the ability to edit 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

There is currently no way to create editable text using Kinetic JS (see a few threads about this in stackoverflow), some people suggest using the input box next to the canvas for editing text, but my solution would be as follows:

• create text with code
• in a text click, click [text.on ("click", function ...]), create an input field right below the mouse cursor

Ok, this is the plan. It may be easier to use the text of the "save" button in the input field so that you know exactly when to close it and when to store the data of the input field in kinetic text. you will also need to “close” the function if you do not want to edit it.

A very simple solution would also be a simple JavaScript request:

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

So something like this would be the best imho solution:

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

Answer 2

I tried for a real KinetiJS plugin with the ability to edit text.

I know that he invents the wheel when you can just move the text box, but why not use it only in the canvas.

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

Answer 3

I did this a few days ago in my project. A hare is a piece of code. Basically, we first draw a rectangle, and then put the text area into it and finally convert it to a kinetic.text node file.

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