SVG多段路径端点匹配合并函数的优化方案

问题背景 #

需要对给定的SVG路径集合做链式拼接：所有端点间距小于阈值的路径首尾相连，最终输出3条完整路径，对齐Maker.js的chaining效果。现有合并函数仅能识别一半连接关系，无法输出正确结果。 #

原始输入数据 #

let mergedPaths = [
    {
        "id": 2,
        "path": "M 19.8279000000 0.0000000000L -19.8300000000 0.0000000000",
        "startPoint": {
            "x": "19.8279000000",
            "y": "0.0000000000",
        },
        "endPoint": {
            "x": "-19.8300000000",
            "y": "0.0000000000"
        }
    },
    {
        "id": 3,
        "path": "M 24.8250000000 -5.1691000000L 24.8230000000 -5.1691000000",
        "startPoint": {
            "x": "24.8250000000",
            "y": "-5.1691000000",
        },
        "endPoint": {
            "x": "24.8230000000",
            "y": "-5.1691000000",
        }
    },
    {
        "id": 4,
        "path": "M -17.9684000000 -65.0000000000L 17.9664000000 -65.0000000000",
        "startPoint": {
            "x": "-17.9684000000",
            "y": "-65.0000000000",
        },
        "endPoint": {
            "x": "17.9664000000",
            "y": "-65.0000000000",
        }
    },
    {
        "id": 5,
        "path": "M -24.8271000000 -5.1691000000L -22.9656000000 -60.1691000000",
        "startPoint": {
            "x": "-24.8271000000",
            "y": "-5.1691000000",
        },
        "endPoint": {
            "x": "-22.9656000000",
            "y": "-60.1691000000",
        }
    },
    {
        "id": 6,
        "path": "M 22.9615000000 -60.1691000000L 24.8230000000 -5.1691000000",
        "startPoint": {
            "x": "22.9615000000",
            "y": "-60.1691000000",
        },
        "endPoint": {
            "x": "24.8230000000",
            "y": "-5.1691000000",
        }
    },
    {
        "id": 7,
        "path": "M 22.9615000000 -60.1691000000L 22.9635000000 -60.1691000000L 22.9635000000 -60.1691000000L 24.8250000000 -5.1691000000L 24.8250000000 -5.1691000000A 5.0000000000 5.0000000000 0 0 1 19.8279000000 0.0000000000",
        "startPoint": {
            "x": "22.9615000000",
            "y": "-60.1691000000",
        },
        "endPoint": {
            "x": "19.8279000000",
            "y": "0.0000000000",
        }
    },
    {
        "id": 8,
        "path": "M 24.8230000000 -5.1691000000A 5.0000000000 5.0000000000 0 0 1 19.8259000000 0.0000000000",
        "startPoint": {
            "x": "24.8230000000",
            "y": "-5.1691000000",
        },
        "endPoint": {
            "x": "19.8259000000",
            "y": "0.0000000000",
        }
    },
    {
        "id": 9,
        "path": "M 17.9643000000 -65.0000000000A 5.0000000000 5.0000000000 0 0 1 22.9615000000 -60.1691000000",
        "startPoint": {
            "x": "17.9643000000",
            "y": "-65.0000000000",
        },
        "endPoint": {
            "x": "22.9615000000",
            "y": "-60.1691000000",
        }
    },
    {
        "id": 10,
        "path": "M -22.9656000000 -60.1691000000A 5.0000000000 5.0000000000 0 0 1 -17.9684000000 -65.0000000000",
        "startPoint": {
            "x": "-22.9656000000",
            "y": "-60.1691000000",
        },
        "endPoint": {
            "x": "-17.9684000000",
            "y": "-65.0000000000",
        }
    },
    {
        "id": 11,
        "path": "M -19.8300000000 0.0000000000A 5.0000000000 5.0000000000 0 0 1 -24.8271000000 -5.1691000000",
        "startPoint": {
            "x": "-19.8300000000",
            "y": "0.0000000000",
        },
        "endPoint": {
            "x": "-24.8271000000",
            "y": "-5.1691000000",
        }
    },
    {
        "id": 12,
        "path": "M 17.9664000000 -65.0000000000A 5.0000000000 5.0000000000 0 0 1 22.9635000000 -60.1691000000",
        "startPoint": {
            "x": "17.9664000000",
            "y": "-65.0000000000",
        },
        "endPoint": {
            "x": "22.9635000000",
            "y": "-60.1691000000",
        }
    },
    {
        "id": 13,
        "path": "M 0.0000000000 -48.7500000000A 1.2500000000 1.2500000000 0 0 1 0.0000000000 -51.2500000000",
        "startPoint": {
            "x": "0.0000000000",
            "y": "-48.7500000000",
        },
        "endPoint": {
            "x": "0.0000000000",
            "y": "-51.2500000000",

        }
    }
]

原有错误代码 #

let pointMatchingDistance = 1;

getDistance = (x1: number, x2: number, y1: number, y2) => {
    let y = x2 - x1;
    let x = y2 - y1;

    return Math.sqrt(x * x + y * y);
}

for (let mergedPath of mergedPaths) {
            
            for (let mergedPathCheck of mergedPaths) {

                if (!mergedPathCheck.mergedWith && !mergedPath.mergedWith) {

                    let distanceStartToEndCheck = this.getDistance(
                        mergedPathCheck.endPoint?.x,
                        mergedPath.startPoint?.x,
                        mergedPathCheck.endPoint?.y,
                        mergedPath.startPoint?.y,
                    );

                    if (distanceStartToEndCheck <= pointMatchingDistance) {

                        mergedPaths = mergedPaths.map((mp) => {
                                return mp.id == mergedPath.id ? {
                                    ...mp,
                                    path: mergedPathCheck.path + mergedPath.path.replace("M", "L"),
                                    startPoint: mergedPathCheck.startPoint,
                                    mergedWith: mergedPathCheck.id
                                } : mp
                            }
                        )

                    }
                }
            }
        }

原有代码问题点 #

• 距离计算逻辑完全错误：参数顺序错位，x/y差值计算写反，根本无法得到正确的两点间距
• 端点匹配场景缺失：仅判断了「待检查路径终点→当前路径起点」一种连接情况，漏掉了当前路径终点接检查路径起点、两端点同向需要反转路径的两种场景
• 数据类型错误：所有坐标值是字符串类型，计算前未转数值，隐式转换会导致计算偏差
• 合并逻辑不完整：合并后未更新路径的终点坐标，无法支持多段路径的长链拼接；仅遍历一轮，没有循环到无可拼接路径为止
• 冗余路径未清理：仅给已合并路径打标记，没有从待匹配集合移除，会出现重复拼接
• 路径拼接逻辑粗暴：直接把后续路径的M替换为L，遇到圆弧指令需要反转路径时会出现绘制方向错误

改进后实现代码 #

const pointMatchingDistance = 1;

// 正确的两点距离计算
const getDistance = (p1, p2) => {
  const dx = Number(p1.x) - Number(p2.x);
  const dy = Number(p1.y) - Number(p2.y);
  return Math.sqrt(dx*dx + dy*dy);
}

// 预处理：所有坐标转数值
let paths = mergedPaths.map(p => ({
  id: p.id,
  path: p.path,
  startPoint: {x: Number(p.startPoint.x), y: Number(p.startPoint.y)},
  endPoint: {x: Number(p.endPoint.x), y: Number(p.endPoint.y)}
}));

let hasMerged = true;
// 循环直到没有可合并的路径
while(hasMerged) {
  hasMerged = false;
  for(let i = 0; i < paths.length; i++) {
    const cur = paths[i];
    for(let j = i+1; j < paths.length; j++) {
      const target = paths[j];
      let merged = null;

      // 场景1：cur终点 接 target起点
      if(getDistance(cur.endPoint, target.startPoint) <= pointMatchingDistance) {
        merged = {
          id: `${cur.id}-${target.id}`,
          path: cur.path + target.path.replace(/^M/, 'L'),
          startPoint: cur.startPoint,
          endPoint: target.endPoint
        }
      }
      // 场景2：cur终点 接 target终点，反转target
      else if(getDistance(cur.endPoint, target.endPoint) <= pointMatchingDistance) {
        // 反转target路径：首尾点互换，圆弧sweep-flag取反
        const reversedTargetPath = target.path
          .replace(/^M\s*([\d.-]+)\s+([\d.-]+)/, `M ${target.endPoint.x} ${target.endPoint.y} L`)
          .replace(/(A\s+[\d.]+\s+[\d.]+\s+\d+\s+\d+\s+)([01])/g, (m, prefix, flag) => prefix + (1-Number(flag)));
        merged = {
          id: `${cur.id}-${target.id}`,
          path: cur.path + reversedTargetPath,
          startPoint: cur.startPoint,
          endPoint: target.startPoint
        }
      }
      // 场景3：cur起点 接 target终点
      else if(getDistance(cur.startPoint, target.endPoint) <= pointMatchingDistance) {
        merged = {
          id: `${target.id}-${cur.id}`,
          path: target.path + cur.path.replace(/^M/, 'L'),
          startPoint: target.startPoint,
          endPoint: cur.endPoint
        }
      }
      // 场景4：cur起点 接 target起点，反转target
      else if(getDistance(cur.startPoint, target.startPoint) <= pointMatchingDistance) {
        const reversedTargetPath = target.path
          .replace(/^M\s*([\d.-]+)\s+([\d.-]+)/, `M ${target.endPoint.x} ${target.endPoint.y} L`)
          .replace(/(A\s+[\d.]+\s+[\d.]+\s+\d+\s+\d+\s+)([01])/g, (m, prefix, flag) => prefix + (1-Number(flag)));
        merged = {
          id: `${target.id}-${cur.id}`,
          path: reversedTargetPath + cur.path.replace(/^M/, 'L'),
          startPoint: target.endPoint,
          endPoint: cur.endPoint
        }
      }

      // 找到可合并项，替换原集合
      if(merged) {
        paths = paths.filter((_, idx) => idx !== i && idx !== j);
        paths.push(merged);
        hasMerged = true;
        break;
      }
    }
    if(hasMerged) break;
  }
}

// 最终paths长度即为3，和预期效果一致
console.log(paths);

注：如果需要更严谨的SVG路径反转逻辑，可引入专门的SVG路径处理库，避免手动处理指令出现兼容问题。

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