Fabric.js调用removeChars()后__lineWidths与光标位置未更新问题求助

嘿，我来帮你梳理下这个问题的原因和正确解法～

问题根源 #

你遇到的问题并不是Fabric.js的Bug，而是依赖私有内部属性导致的不可靠行为：

• __lineWidths是Fabric.js内部用于排版的私有属性（双下划线开头的属性都是Fabric内部使用的），它的更新逻辑只在特定时机触发（比如文本首次渲染、退出编辑状态时），在编辑过程中并不会实时同步更新，所以第一次删除字符后，这个属性的值就不再反映当前文本的实际宽度了，导致后续判断失效。
• 直接调用removeChars后没有正确重置光标位置，所以会出现光标停留在被删除字符位置的错位问题。

正确的实现方式 #

我们应该使用Fabric.js提供的公开API来实现字符/宽度限制，同时正确处理光标位置。下面是优化后的方案：

核心思路 #

1. 用公开方法getScaledWidth()获取文本的实际显示宽度，替代私有属性__lineWidths。
2. 监听text:editing:changed事件（专门针对编辑中的文本变化，比通用的changed事件更精准）。
3. 删除字符后手动调整光标位置，避免错位。

修改后的代码示例 #

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

// 进入编辑状态并聚焦
text.enterEditing();
text.hiddenTextarea.focus();

// 禁止回车键
text.hiddenTextarea.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.which === 10 || event.which === 13) {
    event.preventDefault();
    event.stopPropagation();
  }
});

// 监听编辑中的文本变化事件
canvas.on('text:editing:changed', function(options) {
  var textBox = options.target;
  // 获取文本的实际显示宽度（已考虑缩放、字体等因素）
  var textWidth = textBox.getScaledWidth();
  // 设定宽度阈值（画布宽度减去边距）
  var maxWidth = canvas.width - 40;

  $('#line-width').append('<p>当前文本宽度 = ' + textWidth + '</p>');

  if (textWidth >= maxWidth) {
    $('#line-width').append('<p><b>文本超出宽度限制，自动删除最后一个字符</b></p>');
    // 删除最后一个字符
    textBox.set('text', textBox.text.slice(0, -1));
    // 重新渲染画布
    canvas.renderAll();
    // 重置光标到文本末尾
    var hiddenTextarea = textBox.hiddenTextarea;
    hiddenTextarea.focus();
    hiddenTextarea.setSelectionRange(textBox.text.length, textBox.text.length);
    
    $('#line-width').append('<p>删除后文本宽度 = ' + textBox.getScaledWidth() + '</p>');
  }
});

额外注意事项 #

• 永远不要依赖Fabric.js中下划线开头的属性（比如__lineWidths、_text），这些是内部实现细节，Fabric的版本更新可能会随时修改它们的逻辑，导致你的代码失效。
• 如果需要更细致的字符限制（比如按字符数而非宽度），可以直接判断textBox.text.length是否超过设定值，逻辑会更简单。
• 监听hiddenTextarea的input事件可以实现更实时的限制，不过结合Fabric的text:editing:changed事件能更好地和Fabric的编辑状态同步。

内容的提问来源于stack exchange，提问作者Aleksandra Chuprova