Javascript Fabric.js通过输入编辑文本

我正在开发在线打印媒体应用程序，比如“vistaprint.in”，用户可以在fabric js canvas上修改预先制作的设计。在fabric.js对象中，对象没有唯一的标识符…所有文本对象都为每个对象创建一个输入，这样用户只需更改输入即可直接更改所需的文本…您可以在画布右侧的屏幕截图中看到每个文本对象都有输入…我现在所做的是，当输入更改时，我循环遍历所有文本对象并匹配输入文本和文本对象文本，如果匹配，则我会将新文本更新到该对象。这第一次可以正常工作，但之后不行…我尝试过，但找不到解决此问题的方法

这就是画布和输入现在的样子

这是我现在创建的用于更改画布文本的函数

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

---

您需要为

fabric

对象指定

id

属性，并使用

输入检查该属性，如下示例所示

如果（e.text==v）

只需将所有

fabric

对象设置为唯一的

id

，并将其与输入进行比较即可

var文本；
var帆布；
canvas=newfabric.canvas（'c'）；
text1=新结构。Text（“Text”{
id:“cardalltexthex1”，
尺寸：70，
可选：false，
左:100,，
排名：0，
文本：“文本1”，
填充：“#f00”
});
canvas.add（text1）；
text2=新结构。Text（“Text”{
id:“cardalltexthex2”，
尺寸：70，
可选：false，
左:100,，
前100名，
文本：“文本2”，
填充：“#f00”
});
canvas.add（text2）；
$（'.input'）。在（'keyup'，function（）上{
id=$（this.attr（'id'）；
val=$（this.attr（'data-text'）；
newtext=$（this.val（）；
输入=$（此项）；
objs=canvas.getObjects（）；
forEach（函数（obj）{
if（obj&&obj.text==val）{
obj.setText（newtext）；
input.attr（“数据文本”，newtext）；
canvas.renderAll（）；
}
});
});

感谢您的回复，我知道它可以与ID一起使用，但问题是我们已经创建了数千个设计，并且没有使用任何ID…我需要这样做，而不会出现IDSno错误，但画布文本仅在我首次在中编辑时才更改input@sunilkumar编辑代码，您需要使用textbox的
keyup
事件，并将
data
属性中的旧值设置为fabric的compareProperty setText。文本不会exists@yogendarji是的，我知道了。我将重新投反对票。谢谢你的反馈。