如何点击按钮更新Fabric JS IText中的文本？

你遇到的问题核心是修改IText内容后未触发画布重绘，且removeChars()/insertChars()的使用场景更偏向交互编辑，直接修改文本属性是更高效的方案。

推荐解决方案 #

直接修改IText的text属性，然后调用画布的renderAll()方法刷新视图：

$("#set_text").click(function(){
  // 直接设置新文本
  text1.set('text', 'hello!');
  // 通知画布重新渲染
  canvas.renderAll();
});

原代码问题分析 #

1. 缺少画布重绘：Fabric JS中元素属性变更后不会自动刷新画布，必须手动调用canvas.renderAll()才能让修改生效；
2. removeChars()参数冗余：不需要写1000，用text1.text.length可以精准清除所有原有文本；
3. 方法场景不符：removeChars()和insertChars()主要用于用户手动编辑时的字符操作（比如光标位置插入/删除），批量替换文本用set('text', ...)更直接。

兼容原有方法的修正版 #

如果一定要使用removeChars()和insertChars()，补充画布重绘即可：

$("#set_text").click(function(){
  text1.removeChars(0, text1.text.length);
  text1.insertChars("hello!");
  canvas.renderAll(); // 关键步骤：刷新画布
});

修改后点击按钮，IText会直接更新为你期望的"hello!"，不会出现重复插入或不更新的问题。

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