Fabric.js表格单元格文本无法编辑问题求助

问题根源 #

你的Textbox无法编辑的核心原因是：

• 当Textbox被加入fabric.Group后，Group默认会拦截点击事件，优先选中Group本身，而非内部的Textbox；
• 即便Textbox设置了editable: true，如果无法被选中、获取焦点，就无法触发编辑状态。

解决方案 #

调整Group和Textbox的几个关键属性，让内部Textbox能正常交互：

1. 给Group添加subTargetCheck: true：该属性允许Fabric.js检测点击事件是否命中Group内的子元素，而非直接选中Group；
2. 确保Textbox的selectable为true：显式设置避免Group的继承影响，同时设置evented: true保证Textbox能响应事件；
3. 可选：设置Group的selectable: false：如果不需要单独选中整个表格，设为false后点击会直接触发子元素交互。

修改后的代码 #

function createTable(rows: number, cols: number, cellWidth: number, cellHeight: number) {
  const table = new fabric.Group([], {
    subTargetCheck: true, // 关键：允许检测子元素点击
    selectable: true // 若无需选中整个表格，可改为false
  });

  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      const cell = new fabric.Rect({
        width: cellWidth,
        height: cellHeight,
        fill: 'transparent',
        stroke: 'black',
        strokeWidth: 1,
        selectable: false,
        left: j * cellWidth,
        top: i * cellHeight,
      });

      const text = new fabric.Textbox(`Cell ${i + 1},${j+1}`, {
        left: j * cellWidth + 5,
        top: i * cellHeight + 5,
        fontSize: 16,
        width: cellWidth - 10,
        height: cellHeight - 10,
        fontFamily: 'Arial',
        editable: true,
        selectable: true, // 确保文本框可选中
        evented: true, // 确保文本框能响应事件
        zIndex: 1 // 可选：避免被矩形遮挡
      });

      table.addWithUpdate(cell);
      table.addWithUpdate(text);
    }
  }

  return table;
}

const table = createTable(+rows, +cols, +cellWidth, +cellHeight);
canvas?.add(table);

额外提示 #

• 若需要保持Group可选中、缩放移动，同时能编辑文本，仅设置subTargetCheck: true即可：点击文本区域会选中Textbox进入编辑状态，点击空白区域会选中Group；
• 若编辑时文本被矩形遮挡，给Textbox添加zIndex: 1即可确保它在矩形上方。

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