在JavaScript中重构SVG路径段：拆分Q命令曲线至poly0与poly2

核心思路 #

• 提取poly1的两个Q命令二次贝塞尔曲线参数
• 通过德卡斯特里奥算法拆分每条二次贝塞尔曲线，将拆分后的两段曲线分别整合到poly0和poly2的路径中
• 拆分后的曲线可保留Q命令格式，或转换为C命令（三次贝塞尔）格式

具体实现步骤 #

1. 获取并解析SVG路径元素 #

// 获取目标路径元素
const poly0 = document.getElementById('poly0');
const poly1 = document.getElementById('poly1');
const poly2 = document.getElementById('poly2');

// 拆分poly1的路径指令，按命令字符分割
const poly1PathCommands = poly1.getAttribute('d').split(/(?=[A-Za-z])/);

2. 二次贝塞尔曲线拆分函数 #

该函数接收Q曲线的起点、控制点、终点，以及拆分比例t（0-1之间，默认0.5为中点），返回拆分后的两段曲线：

function splitQuadratic(startX, startY, ctrlX, ctrlY, endX, endY, t = 0.5) {
    // 计算拆分过程中的中间控制点
    const midStartX = startX + t * (ctrlX - startX);
    const midStartY = startY + t * (ctrlY - startY);
    const midCtrlX = ctrlX + t * (endX - ctrlX);
    const midCtrlY = ctrlY + t * (endY - ctrlY);
    const splitPointX = midStartX + t * (midCtrlX - midStartX);
    const splitPointY = midStartY + t * (midCtrlY - midStartY);

    // 返回两段Q格式曲线，若需转为C格式可替换为对应指令
    return {
        firstSegment: `Q ${midStartX} ${midStartY} ${splitPointX} ${splitPointY}`,
        secondSegment: `Q ${midCtrlX} ${midCtrlY} ${endX} ${endY}`
    };
}

3. 提取poly1的Q曲线段并拆分 #

假设poly1的路径为M x,y Q cx,cy x2,y2 Q cx2,cy2 x3,y3格式，解析并拆分两条Q曲线：

let currentX, currentY;
const qCurves = [];

// 遍历poly1的路径命令，提取所有Q曲线参数
for (const cmd of poly1PathCommands) {
    const cmdType = cmd[0];
    const coords = cmd.slice(1).trim().split(/\s+/).map(Number);
    if (cmdType === 'M') {
        currentX = coords[0];
        currentY = coords[1];
    } else if (cmdType === 'Q') {
        qCurves.push({
            startX: currentX,
            startY: currentY,
            ctrlX: coords[0],
            ctrlY: coords[1],
            endX: coords[2],
            endY: coords[3]
        });
        // 更新当前点为曲线终点
        currentX = coords[2];
        currentY = coords[3];
    }
}

// 拆分两条Q曲线
const [firstCurve, secondCurve] = qCurves;
const splitFirst = splitQuadratic(firstCurve.startX, firstCurve.startY, firstCurve.ctrlX, firstCurve.ctrlY, firstCurve.endX, firstCurve.endY);
const splitSecond = splitQuadratic(secondCurve.startX, secondCurve.startY, secondCurve.ctrlX, secondCurve.ctrlY, secondCurve.endX, secondCurve.endY);

4. 将拆分后的曲线整合到poly0和poly2 #

根据路径的相邻关系，将拆分后的曲线段合并到对应路径：

// 整合第一段拆分曲线到poly0末尾
let poly0Path = poly0.getAttribute('d');
poly0Path += ` ${splitFirst.firstSegment}`;
poly0.setAttribute('d', poly0Path);

// 整合第二段拆分曲线到poly2（示例为接在移动命令后，可根据实际路径结构调整）
let poly2Path = poly2.getAttribute('d');
poly2Path = poly2Path.replace(/M\s+[\d\s.]+/, match => `${match} ${splitSecond.secondSegment}`);
poly2.setAttribute('d', poly2Path);

// 可选：拆分完成后隐藏原poly1
poly1.style.display = 'none';

关键注意事项 #

• 拆分比例调整：修改t参数可控制曲线拆分位置，0为起点，1为终点，0.5为中点
• 命令格式转换：若需使用C命令，可将二次贝塞尔转为三次贝塞尔，转换规则为：三次贝塞尔的两个控制点分别为start + 2/3*(ctrl - start)和end + 2/3*(ctrl - end)
• 路径衔接校验：需确保poly0的终点与拆分后第一段曲线的起点重合，poly2的起点与拆分后第二段曲线的终点重合，避免出现路径间隙

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