javascript - change - title html

Opción editable de texto en cinética js

Question

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

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

Answer 1

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

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

Bueno, ese es el plan. Tal vez sea más fácil utilizar un texto de botón "guardar" en el campo de entrada, para saber exactamente cuándo cerrarlo y cuándo almacenar los datos del campo de entrada en el texto cinético. también necesitaría una función "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(); //redraw the layer containing the textfield
});

Answer 2

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

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

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

Answer 3

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