如何在Fabric.js中复刻Canva.com的群组选择与编辑行为

兄弟，我之前折腾过类似的需求，Canva的群组交互确实有几个容易忽略的细节，看了你现有的useCanvasEvents hook，已经有了基础的逻辑，但还差几个关键的调整，我给你梳理下改进方案：

一、先理清楚Canva群组交互的核心规则 #

在动手改代码前，先对齐目标：

• 单击群组：选中整个组，支持整体移动、缩放、旋转
• 双击群组：进入「组编辑模式」，组的边框视觉变化，子元素可直接选中、修改
• 双击组内文本：跳过组选择，直接进入文本编辑状态
• 点击组外空白区域/按Esc键：退出组编辑模式，回到选中整个组的状态
• 组内锁定元素依然不可选中

二、修复群组编辑模式的切换逻辑 #

你现在的双击逻辑已经用到了subTargetCheck，但有几个漏洞，我给你补全：

1. 增加「当前编辑群组」的跟踪变量 #

在hook里加个变量跟踪当前处于编辑模式的群组，方便退出时统一重置：

// 在useEffect内部定义，避免全局污染
let activeEditingGroup: FabricObject | null = null;

2. 完善双击事件逻辑 #

修改mouse:dblclick事件，补充进入/退出编辑模式的完整流程，还有文本直接编辑的处理：

canvas.on("mouse:dblclick", (e) => {
  const target = e.target as FabricObject | null;

  // 先退出之前的组编辑模式（如果有）
  if (activeEditingGroup) {
    resetSubTargetCheckForGroups(canvas);
    // 恢复组的默认视觉样式
    activeEditingGroup.set("borderColor", "#0096ff");
    activeEditingGroup.set("cornerColor", "#0096ff");
    activeEditingGroup = null;
    canvas.requestRenderAll();
  }

  // 双击群组：进入编辑模式
  if (target && target.type === "group") {
    activeEditingGroup = target;
    // 开启子元素选中检测
    target.set("subTargetCheck", true);
    // 给组加编辑模式的视觉提示（仿Canva的灰边）
    target.set("borderColor", "#aaa");
    target.set("cornerColor", "#ccc");

    // 尝试直接选中点击位置的子元素
    const pointerEvent = e.e;
    // 第二个参数设为true，跳过组直接找到子元素
    const subTarget = canvas.findTarget(pointerEvent, true);
    if (subTarget && subTarget !== target) {
      canvas.setActiveObject(subTarget);
    } else {
      canvas.setActiveObject(target);
    }
    canvas.requestRenderAll();
    return;
  }

  // 双击文本：直接进入编辑
  if (target && target.type === "i-text") {
    target.enterEditing();
    target.selectAll(); // 自动选中所有文本，方便直接修改
    canvas.requestRenderAll();
    save(); // 编辑完成后自动保存
    return;
  }

  // 双击空白区域：清空选中并重置所有组
  if (!target) {
    resetSubTargetCheckForGroups(canvas);
    activeEditingGroup = null;
    canvas.discardActiveObject();
    canvas.requestRenderAll();
  }
});

3. 增加Esc键退出组编辑模式 #

在useEffect内部添加键盘监听，支持按Esc快速退出：

const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === "Escape" && activeEditingGroup && canvas) {
    // 重置组状态
    resetSubTargetCheckForGroups(canvas);
    activeEditingGroup.set("borderColor", "#0096ff");
    activeEditingGroup.set("cornerColor", "#0096ff");
    activeEditingGroup = null;
    // 重新选中整个组
    canvas.setActiveObject(activeEditingGroup);
    canvas.requestRenderAll();
  }
};
window.addEventListener("keydown", handleKeyDown);

// 记得在清理函数里移除监听
return () => {
  window.removeEventListener("keydown", handleKeyDown);
  // ... 你的原有清理逻辑
};

三、优化选中逻辑的细节 #

你现在的selection:created和selection:updated已经处理了锁定元素，但还要补充「组编辑模式下不选中整个组」的规则：

修改选中事件的过滤逻辑 #

// 以selection:created为例，selection:updated做同样的修改
canvas.on("selection:created", (e) => {
  let selected = e.selected;

  // 组编辑模式下，过滤掉当前编辑的组本身
  if (activeEditingGroup) {
    selected = selected.filter(obj => obj !== activeEditingGroup);
  }

  // 你的原有锁定元素过滤逻辑
  let dirty = false;
  selected.forEach((obj) => {
    if (objectIsLocked(obj)) {
      const activeObject = canvas.getActiveObject();
      if (activeObject && activeObject.type === "activeSelection") {
        (activeObject as ActiveSelection).remove(obj);
        dirty = true;
      }
    }
  });

  if (dirty) {
    canvas.requestRenderAll();
  }

  // 更新选中集合
  const activeObject = canvas.getActiveObject();
  const filteredSelected = activeObject
    ? activeObject.type === "activeSelection"
      ? (activeObject as ActiveSelection).getObjects()
      : [activeObject]
    : [];
  setSelectedObjects(filteredSelected);
});

四、完善退出组编辑模式的触发条件 #

除了Esc和双击，点击组外空白区域也要退出编辑模式，修改mouse:up事件：

canvas.on("mouse:up", (e) => {
  const target = e.target as FabricObject | null;

  // 如果点击的是组外，或者不是当前编辑的组，退出编辑模式
  if (activeEditingGroup) {
    const isClickInsideGroup = target && activeEditingGroup.contains(target);
    if (!target || !isClickInsideGroup) {
      resetSubTargetCheckForGroups(canvas);
      activeEditingGroup.set("borderColor", "#0096ff");
      activeEditingGroup.set("cornerColor", "#0096ff");
      activeEditingGroup = null;
      canvas.requestRenderAll();
    }
  } else {
    // 非编辑模式下，重置所有组的subTargetCheck
    if (!target || target.type !== "group") {
      resetSubTargetCheckForGroups(canvas);
    }
  }
});

五、文本编辑的额外处理 #

给文本编辑完成的事件加保存逻辑，确保修改后自动存储：

canvas.on("text:editing:exited", () => {
  save();
});

最后验证下效果 #

改完后你可以测试这些场景：

1. 单击组 → 选中整个组，可整体操作
2. 双击组 → 组边框变灰，点选子元素可单独修改
3. 双击组内文本 → 直接进入文本编辑
4. 点击组外/按Esc → 退出编辑模式，回到组选中状态
5. 锁定元素依然无法选中

这些调整后，基本就能和Canva的群组交互逻辑对齐了～

内容来源于stack exchange