Opción editable de text en cinética js

Quiero agregar Textbox o elemento editable para darle al usuario la opción de editar el text.

Este es mi código actual:

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

Por el momento no parece haber ninguna forma de crear text editable con Kinetic JS (ver varios hilos sobre esto en stackoverflow), algunas personas sugieren usar un campo de input al lado del canvas para editar el text, pero mi solución sería la siguiendo:

  • crea un text con tu código
  • en el text, click [text.on ("clic", function …], cree un campo de input a la derecha en el cursor del mouse

Bueno, ese es el plan. Tal vez sea más fácil utilizar un text de button "save" en el campo de input, para saber exactamente cuándo cerrarlo y cuándo almacenar los datos del campo de input en el text cinético. también necesitaría una function "cerrar" si no quiere editarla.

Una solución muy fácil también sería un simple aviso de JavaScript:

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

Entonces, algo como esto sería la mejor solución.

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

Intenté un complemento KinetiJS real con funcionalidad de text editable.

Sé que está reinventando la rueda, cuando puedes desplazarte sobre un área de text, pero ¿por qué no tenerlo solo en el canvas también?

Compruebe el complemento en: https://github.com/nktsitas/kineticjs-editable-text

Lo hice algunos días atrás en mi proyecto. Hare son los fragments de código. Básicamente, primero dibujamos el rectángulo y luego colocamos un área de text dentro de él y finalmente lo convertimos en un nodo 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(); } },