在 Typescript 环境中在 Fabricjs v6 中取消分组的正确方法是什么？

Question

我找不到任何有关如何在 Typescript 环境中正确取消 Fabricjs v6 中的项目的信息。

据我所知，Group.toActiveSelection 不在 v6 中，我能得到的最接近的是这个：

const ungroupSelectedObject = () => {
    if (!fabricCanvasRef.current) return;

    const activeObject = fabricCanvasRef.current.getActiveObject();

    if (activeObject && isGroup(activeObject)) {
      const items = activeObject.getObjects();
      fabricCanvasRef.current.remove(activeObject);

      items.forEach((item) => {
        fabricCanvasRef.current?.add(item);
        
      });
      
      // Optionally, select the ungrouped items
      const selection = new fabric.ActiveSelection(items, {
        canvas: fabricCanvasRef.current,
      });
      fabricCanvasRef.current.setActiveObject(selection);
      fabricCanvasRef.current.renderAll();

      setIsGroupSelected(false);
      setIsMultipleSelected(true);
    }
  };

但是未分组的对象不再可选。其他尝试传送了物体并破坏了画布，所以我没有主意了。

Answer 1

以下是 v6 的正确分组/取消分组： 关键是.removeAll()

 // Function to group selected objects
const groupSelectedObjects = () => {
  if (!fabricCanvasRef.current) return;
  const objects = fabricCanvasRef.current.getActiveObjects();
  if (objects.length > 1) {
    // Remove objects from canvas
    objects.forEach((obj) => fabricCanvasRef.current?.remove(obj));
    // Create group
    const group = new fabric.Group(objects);
    fabricCanvasRef.current.add(group);
    fabricCanvasRef.current.requestRenderAll(); // Use requestRenderAll() in Fabric.js v6
  }
};

// Function to ungroup selected group
const ungroupSelectedObject = () => {
  if (!fabricCanvasRef.current) return;
  const activeObject = fabricCanvasRef.current.getActiveObject() as fabric.Group;
  if (!activeObject) return;
  if (isGroup(activeObject)) {
    fabricCanvasRef.current.remove(activeObject);
    // Use removeAll() to get the items and add them back to the canvas
    const items = activeObject.removeAll();
    fabricCanvasRef.current.add(...items);
    fabricCanvasRef.current.requestRenderAll(); // Use requestRenderAll() in Fabric.js v6
  }
};