Javascript Fabricjs固定文本框

如何固定文本框的大小，以防止其在键入时溢出大小（固定宽度和高度）

---

您可以重写

insertChars

方法并检查文本溢出

请参阅下面的代码片段

//创建画布
const canvas=newfabric.canvas（document.querySelector（'canvas'）；
//定义扩展“Textbox”的“LimitedTextbox”类`
const LimitedTextbox=fabric.util.createClass（fabric.Textbox{
//重写'insertChars'方法
insertChars：函数（字符）{
if（此.maxWidth）{
const textwidthundersor=this.\u getLineWidth（this.ctx，this.get2DCursorLocation（）.lineIndex）；
if（textwidthundersor+this.ctx.measureText（chars.width>this.maxWidth）{
字符='\n'+字符；
}
}
如果（此.maxLines）{
const newLinesLength=this.\u wrapText（this.ctx，this.text+chars）.length；
如果（newLinesLength>this.maxLines）{
返回；
}
}
//调用父类方法
this.callSuper（'insertChars'，chars）；
}
});
//创建最大宽度为300px、最多2行的有限文本框
canvas.add(
新建LimitedTextbox（'文本'{
前10名，
左:10,，
宽度：300，
最大宽度：300，
最大线：2
})
);
canvas.renderAll（）
.canvas容器{
边框：1px纯色灰色；
}
对于fabric js Version 2+中的固定文本框，我们需要覆盖onInput函数，如下所示

onInput: function(e) {
    if(this.width > this.maxWidth) {
        return;
    }

    if((this._textLines.length) > this.maxLines) {
        return;
    }

    // Call parent class method
    this.callSuper('onInput', e);
}

注意：maxWidth-用于限制宽度和maxLines-用于限制文本框中的高度/行
解决方案只提供了字符的表示形式。在引擎盖下，隐藏的文本区域继续接受字符

因此，如果允许使用退格并单击，则会弹出在maxLines之后写入的所有不可见文本

解决方案：使用以下代码将隐藏文本区域与文本同步：

 if (this._textLines.length > this.maxLines && e.inputType !== 'deleteContentBackward') {
    this.hiddenTextarea.value = this.text;
    return;
 }


对于版本2.4.6如何实现这一点，有什么建议吗？insertChar函数在两个版本中都不同，因此在两个版本中都不能按预期工作
 if (this._textLines.length > this.maxLines && e.inputType !== 'deleteContentBackward') {
    this.hiddenTextarea.value = this.text;
    return;
 }