Question

我试图用fabric.js构建一种设计师我想要实现的是限制用户输入的字符数。我通过检查画布和文本框属性__lineWidths的宽度来做到这一点。那么__lineWidths超出了画布的宽度，最后一个字符被removeChars（）删除。

问题是只能工作一次，直到第一次满足条件的那一刻，然后它停止工作，因为在removeChars（）执行后，__ lineWidth似乎没有更新。每增加一次输入就会增加。

此外，这可能导致错误的光标位置。光标停留在被删除字符的位置。

我做了一个jsFiddle来证明这个问题。我还把这段代码放在下面。

这是一个错误，还是我做错了什么？那么怎样才能完成这个道路呢？

 var canvas = new fabric.Canvas('myCanvas', {
   width: 300,
   height: 50
 });

var text = new fabric.Textbox(
 '123456789', {
  textAlign: 'center',
  fontSize: 40,
  fill: '#000',
  width: 300,
  height: 50,
  fontFamily: 'ANWB'
});

canvas.add(text);
canvas.renderAll();

canvas.item(0).enterEditing();
canvas.item(0).hiddenTextarea.focus();


canvas.item(0).hiddenTextarea.onkeydown = function(event) {
//forbid use of ENTER
if (event.key == 'Enter' || event.which == 10 || event.which == 13) {

event.preventDefault();
event.stopPropagation();
console.log('passed enter forbid');
}
}

/*text.hiddenTextarea.onblur = function(event){
    if (canvas.item(id).isEditing === true){
        setTimeout(function () { 
            canvas.item(id).hiddenTextarea.focus(); 
        }, 20);

    }
}*/


text.on('changed', function(options) {
$('#line-width').append('<p> line-width = ' + this.__lineWidths[0] + '</p>');

if (this.__lineWidths[0] >= (canvas.width - 40)) {
$('#line-width').append('<p><b>Characters length in __lineWidths[0] is longer than the specified number</b></p>');

this.removeChars((this._text.length - 1), (this._text.length0));
text.hiddenArea.focus();
$('#line-width').append('<p>line-width after the removeChar() = ' + this.__lineWidths[0] + '</p>');

}
});

在fabric.js的文本框中使用removeChars（）后，__ lineWidths和光标的位置没有得到更新

0 个答案: