Javascript Fabric js-不要在画布上添加两个以上的文本区域

在我的Fabric js 4.3.1项目中，我试图设置向画布添加文本的限制。我的目标是限制2个文本添加，每个文本区域一个

这是我现在的代码，但它不工作得很好，因为每次我在文本区域中写入文本时，一个文本被添加到另一个文本之上，没有任何限制

var canvas=this.\uu canvas=newfabric.canvas（'canvas'）；
$（函数（）{
canvas.setHeight（'300'）；
canvas.setWidth（'800'）；
canvas.renderAll（）；
fabric.Object.prototype.transparentCorners=false；
fabric.Object.prototype.padding=5；
var textOptions={
尺寸：16，
左:20,，
前20名，
半径：10，
边界半径：“25px”，
hasRotatingPoint：对
};
var textOptions2={
尺寸：16，
左:20,，
前50名，
半径：10，
边界半径：“25px”，
hasRotatingPoint：对
};
//文本1
$（“#AddTextCust”）.keyup（函数（）{
var textObject=new fabric.IText（$（“#AddTextCust”）.val（），textOptions）；
if（$.trim（$（this.val（））.length>0）{
canvas.add（textObject）；
canvas.renderAll（）；
}
});
document.getElementById（'AddTextCust'）。addEventListener（'keyup'，function（）{
canvas.getActiveObject（）.text=document.getElementById（'AddTextCust'）.value；
canvas.renderAll（）；
});
//文本2
$（“#AddTextCust2”）.keyup（函数（）{
var textObject=new fabric.IText（$（“#AddTextCust2”）.val（），textOptions2）；
if（$.trim（$（this.val（））.length>0）{
canvas.add（textObject）；
canvas.renderAll（）；
}
});
document.getElementById（'AddTextCust2'）。addEventListener（'keyup'，function（）{
canvas.getActiveObject（）.text=document.getElementById（'AddTextCust2'）.value；
canvas.renderAll（）；
});
});
在每个
keyup
事件上添加一个新的
IText
对象。因此，fabric正在呈现多个文本片段。（还有多个
keyup
事件处理程序对相同的对象执行大致相同的操作。）

您的原始代码：

//文本1
$（“#AddTextCust”）.keyup（函数（）{
var textObject=new fabric.IText（$（“#AddTextCust”）.val（），textOptions）；
if（$.trim（$（this.val（））.length>0）{
canvas.add（textObject）；
canvas.renderAll（）；
}
});
document.getElementById（'AddTextCust'）。addEventListener（'keyup'，function（）{
canvas.getActiveObject（）.text=document.getElementById（'AddTextCust'）.value；
canvas.renderAll（）；
});

与其添加新的
IText
对象，不如只创建一个对象并进行更新。（另外，请删除其中一个
keyup
事件处理程序）：

//文本1
常量$addTextCust=$（“#addTextCust”）；
const textObject=new fabric.IText（$addTextCust.val（），textOptions）；
canvas.add（textObject）；
$addTextCust.keyup（函数（）{
textObject.text=$addTextCust.val（）；
canvas.renderAll（）；
});
您的代码段不起作用。但是，如果您看到新文本绘制在旧文本的顶部，我想您需要在调用
.renderAll（）
之前清除画布。感谢回复人。所以，当我在textarea上执行keyup时，如果只添加一个文本，我如何编写我的代码？@Ourobrus我的代码有效，请检查这把小提琴。正如你所看到的，当我试图写它重叠的文本时，我希望它只打印一次。使用按钮确认Entries如何我更新了我的小提琴：使用canvas.clear（）文本不重叠，但清除所有元素并重置文本在canvas中的位置，这对我不好。完美的人！最后一件事！如果我想在画布上调整和移动这个字符串，我不能。为什么？Thanks@JackomFabric.js对象有一个和属性，可以用来偏移它们的位置。好了，伙计，如果我想在使用keyup编写时更改画布中文本的不透明度，我该怎么做？？