Fabric.js éditant le texte via des entrées

Question

Je travaille sur l'application de médias imprimés en ligne comme 'vistaprint.in' où l'utilisateur peut modifier les conceptions premade sur toile js canvas. dans l'objet fabric.js il n'y a pas d'identifiant unique pour les objets ... tous les objets texte créent une entrée pour chacun d'entre eux afin que l'utilisateur puisse directement changer le texte désiré en changeant juste en entrée ... vous pouvez voir dans la capture d'écran du côté droit de il y a des entrées pour chaque objet texte ... ce que je fais maintenant est quand l'entrée change i boucle à travers tous les objets texte et assortit le texte d'entrée et le texte d'objet texte s'il correspond alors je mets à jour le nouveau texte à cet objet pour la première fois mais pas après ça ... j'ai essayé mais je n'arrivais pas à trouver quoi faire pour résoudre ça.

Voici comment toile et entrée ressemble maintenant Screenshot of app

et c'est la fonction que je créé aujourd'hui pour changer le texte de toile

$(document).on('input', '#cardalltexthex input', function(){  
v = $(this).attr('text'); 
newtext = $(this).val(); 
objs = canvas.getObjects(); 
objs.forEach(function(e) { 
    if (e && e.type === 'i-text') { 
    console.log(e.text); 
    console.log(newtext); 
    if (e.text == v) { 
    e.setText(newtext); 
    canvas.renderAll(); 
    } 
    } 
}); 
}); 

Answer 1

Vous devez spécifier id propriété à fabric objet et vérifier cette propriété avec votre input comme ci-dessous échantillon

Pas besoin de faire if (e.text == v) juste définir tous fabric objet avec un id unique et de comparer cela avec votre entrée.

var text; 
 
var canvas; 
 
canvas = new fabric.Canvas('c'); 
 
text1 = new fabric.Text("Text", { 
 
    id: "cardalltexthex1", 
 
    fontSize: 70, 
 
    selectable: false, 
 
    left: 100, 
 
    top: 0, 
 
    text: "text1", 
 
    fill: '#f00' 
 
}); 
 
canvas.add(text1); 
 
text2 = new fabric.Text("Text", { 
 
    id: "cardalltexthex2", 
 
    fontSize: 70, 
 
    selectable: false, 
 
    left: 100, 
 
    top: 100, 
 
    text: "text2", 
 
    fill: '#f00' 
 
}); 
 
canvas.add(text2); 
 

 

 

 
$('.input').on('keyup', function() { 
 
    id = $(this).attr('id'); 
 
    val = $(this).attr('data-text'); 
 
    newtext = $(this).val(); 
 
    input = $(this); 
 

 
    objs = canvas.getObjects(); 
 
    objs.forEach(function(obj) { 
 
    if (obj && obj.text == val) { 
 
     obj.setText(newtext); 
 
     input.attr("data-text", newtext); 
 
     canvas.renderAll(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 

 
<canvas id="c" width=500 height=250></canvas> 
 

 
<input class="input" data-text="text1" value="text1" id="cardalltexthex1" /> 
 

 
<input class="input" data-text="text2" value="text2" id="cardalltexthex2" />