如何在JavaScript中通过组合相交图形创建复杂图形？

完全可以实现，FabricJS提供了布尔运算中的联合（Union）功能，能将多个相交图形合并为一个以所有图形外边缘为轮廓的复杂图形。以下是具体实现步骤和代码示例：

核心思路 #

1. 选中需要合并的多个图形对象
2. 将所有选中对象转换为fabric.Path类型（布尔运算仅支持Path对象）
3. 通过依次执行union操作，将多个Path合并为一个新的复合路径
4. 将合并后的路径添加到画布，移除原选中对象

代码示例 #

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

// 创建几个相交的示例图形
const rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: '#ff0000',
  stroke: '#000',
  strokeWidth: 2
});
const circle1 = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 60,
  fill: '#00ff00',
  stroke: '#000',
  strokeWidth: 2
});
const rect2 = new fabric.Rect({
  left: 120,
  top: 30,
  width: 80,
  height: 120,
  fill: '#0000ff',
  stroke: '#000',
  strokeWidth: 2
});

canvas.add(rect1, circle1, rect2);

// 绑定合并按钮点击事件（或选中后自动触发）
document.getElementById('merge-btn').addEventListener('click', () => {
  const selectedObjects = canvas.getActiveObjects();
  if (selectedObjects.length < 2) return;

  // 将所有选中对象转为Path
  const paths = selectedObjects.map(obj => obj.toPath(true));

  // 初始化合并后的路径为第一个Path
  let mergedPath = paths[0];

  // 依次与剩余路径执行联合操作
  for (let i = 1; i < paths.length; i++) {
    mergedPath = mergedPath.union(paths[i]);
  }

  // 创建新的Fabric Path对象
  const finalShape = new fabric.Path(mergedPath.path, {
    fill: '#cccccc',
    stroke: '#000',
    strokeWidth: 2
  });

  // 移除原选中对象，添加合并后的图形
  canvas.remove(...selectedObjects);
  canvas.add(finalShape);
  canvas.setActiveObject(finalShape);
  canvas.renderAll();
});

注意事项 #

• 确保所有参与合并的对象都能被转换为Path（FabricJS的基础图形如Rect、Circle、Polygon都支持toPath()方法）
• 合并后的图形会继承自定义的填充、描边样式，可根据需求调整
• 如果需要保留原图形，可以在合并前复制对象，而不是直接移除

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