Fabric.js通过输入编辑文本

Question

我正在处理在线打印介质应用程序，如'vistaprint.in'，其中用户可以在织物js画布上修改预制设计。在fabric.js对象中没有对象的唯一标识符...所有的文本对象都为它们创建了一个输入，以便用户只需通过更改输入即可直接更改所需的文本...您可以在右边的截图中看到画布有每个文本对象的输入...我现在正在做的是当输入更改时，我循环遍历所有文本对象，并匹配输入文本和文本对象文本，如果它匹配，那么我更新新的文本到该对象..这工作正常第一次，但不是在那之后...我试过但无法找到解决这个问题的方法。

这是帆布和输入的样子现在 Screenshot of app

，这是我现在创造了改变画布文本功能

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

你需要指定id财产到fabric对象，并检查该属性与您的input如下样本

不需要做if (e.text == v)只需设置所有的fabric对象与一些独特的id并将其与您的输入进行比较。

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" />