如何将Fabric.js中通过fabric.loadSVGFromURL加载的Path转为Polygon？

嘿，这个需求我刚好折腾过，咱们一步步来搞定它～

首先，Fabric的Path本质是由一系列绘制指令组成的，而Polygon是基于顶点数组的，所以核心就是从Path里提取出所有顶点坐标，再用这些坐标创建Polygon，最后在每个顶点上画圆。

步骤1：从Path中提取顶点坐标 #

Path的path属性存储了所有绘制指令（比如['M', x, y]是移动到起点，['L', x, y]是直线到下一个点）。我们需要遍历这些指令，把所有顶点坐标提取出来——这里要注意区分绝对指令（大写M/L）和相对指令（小写m/l），相对指令的坐标是基于当前位置的，得转换成绝对坐标：

// 假设你的Path对象是pathObj
const points = [];
let currentX = 0;
let currentY = 0;

pathObj.path.forEach(segment => {
  const [command, ...coords] = segment;
  
  switch(command) {
    // 绝对移动/直线指令
    case 'M':
    case 'L':
      currentX = coords[0];
      currentY = coords[1];
      points.push({x: currentX, y: currentY});
      // 处理多坐标的情况（比如L指令同时指定多个点）
      for(let i = 2; i < coords.length; i += 2) {
        currentX = coords[i];
        currentY = coords[i + 1];
        points.push({x: currentX, y: currentY});
      }
      break;
    // 相对移动/直线指令
    case 'm':
    case 'l':
      currentX += coords[0];
      currentY += coords[1];
      points.push({x: currentX, y: currentY});
      for(let i = 2; i < coords.length; i += 2) {
        currentX += coords[i];
        currentY += coords[i + 1];
        points.push({x: currentX, y: currentY});
      }
      break;
    // 闭合指令Z/z：Polygon会自动闭合，不需要额外处理
    case 'Z':
    case 'z':
      break;
  }
});

步骤2：用提取的顶点创建Polygon #

拿到顶点数组后，直接实例化fabric.Polygon，替换掉原来的Path对象：

// 创建Polygon，样式可以按需调整
const polygon = new fabric.Polygon(points, {
  fill: 'transparent',
  stroke: '#333',
  strokeWidth: 2,
  // 如果你需要保留原Path的其他属性（比如位置、旋转），可以直接继承
  left: pathObj.left,
  top: pathObj.top,
  angle: pathObj.angle,
  scaleX: pathObj.scaleX,
  scaleY: pathObj.scaleY
});

// 移除原Path，添加新Polygon到画布
canvas.remove(pathObj);
canvas.add(polygon);
canvas.renderAll();

步骤3：在每个顶点绘制圆形 #

Polygon的points是相对于自身坐标系统的，所以需要先转换成画布的绝对坐标，再创建Circle对象添加到画布：

// 遍历Polygon的每个顶点
polygon.points.forEach(point => {
  // 转换为画布绝对坐标
  const absolutePos = polygon.toAbsolutePoint(point);
  // 创建顶点圆，半径和样式按需调整
  const vertexCircle = new fabric.Circle({
    left: absolutePos.x - 5, // 向左偏移半径值，让圆心对齐顶点
    top: absolutePos.y - 5,
    radius: 5,
    fill: '#ff4444',
    selectable: false, // 可选：禁止选中圆，避免干扰操作
    evented: false // 可选：禁止圆响应鼠标事件
  });
  canvas.add(vertexCircle);
});

canvas.renderAll();

注意事项 #

• 如果你的Path包含贝塞尔曲线（C/Q指令），上面的方法只能提取控制点，不是路径的实际顶点。这种情况你需要用pathObj.getPointAtLength(length)方法来采样路径上的点，再用这些采样点创建Polygon（但这样就不是严格的顶点了，而是路径上的采样点）。
• 如果原Path有缩放、旋转等变换，记得在创建Polygon时继承这些属性，避免位置偏移。

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