如何通过代码选中FabricJS中IText的文本，创建时自动全选方便编辑

实现该需求主要用到FabricJS IText内置的selectAll()方法，搭配画布激活对象设置即可完成，具体实现逻辑如下：

• 正常初始化画布、创建IText实例并添加到画布
• 将新创建的IText设为画布当前激活对象
• 调用IText实例的selectAll()方法触发全选，刷新画布即可生效

基础实现代码 #

// 初始化画布
const canvas = new fabric.Canvas('demoCanvas');

// 创建IText实例
const iText = new fabric.IText('测试文本内容', {
  left: 50,
  top: 50,
  fontSize: 26,
  fill: '#333'
});

// 添加文本到画布
canvas.add(iText);
// 设置为画布激活对象
canvas.setActiveObject(iText);
// 全选文本
iText.selectAll();
// 刷新画布渲染选中效果
canvas.renderAll();

时序兼容优化 #

如果遇到创建后全选不生效的情况，一般是实例还未完成挂载到画布导致的，可以将全选逻辑绑定到IText的added事件回调，确保挂载完成后再执行：

const iText = new fabric.IText('测试文本内容', {
  left: 50,
  top: 50,
  fontSize: 26,
  fill: '#333'
});

iText.on('added', function() {
  canvas.setActiveObject(this);
  this.selectAll();
  canvas.renderAll();
});

canvas.add(iText);

实现效果 #

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