將Q路徑段重建為JavaScript/SVG中的片段

有一個 SVG 元素，其相鄰邊的路徑（多邊形）很少。

<svg id="dummyIn" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet">
    <path id="poly0" d="M200 296.6L400 187.6L400 285L200 346.2Z" fill="#005f73" />
    <path id="poly1" d="M200 346.2L320 309.48 Q400 285 478.6533272400307 313.51183112451116L600 357.5L600 596.7L467.8848705014076 511.6839141676558 Q400 468 320 478.8L200 495Z" fill="#0a9396" />
    <path id="poly2" d="M400 187.6L600 324.8L600 357.5L400 285Z" fill="#94d2bd" />
</svg>

名為“poly1”的路徑有兩條基于 Q 命令L320 309.48 Q400 285 478.6533272400307 313.51183112451116和的曲線段L467.8848705014076 511.6839141676558 Q400 468 320 478.8L200 495。

任務是以某種方式在 JavaScript 中為“poly0”和“poly2”重新計算這些段，因此輸出將是

通過將這些曲線切割成段，在 Adob??e Illustrator 中做了一個輸出模型，輸出 SVG 是

<svg id="dummyOut" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet">
    <path id="poly0" d="M200 296.6L400 187.6L478.7,313.5c-26.1-9.5-52.3-14.5-78.7-15.3L200 346.2Z" fill="#005f73" />
    <path id="poly1" d="M200 346.2L320 309.48 Q400 285 478.6533272400307 313.51183112451116L600 357.5L600 596.7L467.8848705014076 511.6839141676558 Q400 468 320 478.8L200 495Z" fill="#0a9396" />
    <path id="poly2" d="M400 187.6L600 324.8L600 357.5L478.7,313.5c-26.1-9.5-52.3-14.5-78.7-15.3Z" fill="#94d2bd" />
</svg>

換句話說，目標是L320 309.48 Q400 285 478.6533272400307 313.51183112451116分成兩部分L400,298.3c-26.6-0.7-53.2,3-80,11.2和L478.7,313.5c-26.1-9.5-52.3-14.5-78.7-15.3。

那只是一個基于 C 命令的 Illustrator 解決方案。但這不是強制性的。

uj5u.com熱心網友回復：

你只需要計算一些插值點。

• 青色：上一個命令的最后一點（前面Q）
• 藍色： Q二次貝塞爾曲線控制點
• 橙色： Q命令結束點
• 紫色 1 2：青藍色和藍橙色之間的中間點——這些將成為新的Q控制點
• 紅色：紫色 1-紫色 2 之間的中間點——將成為新的L指揮點。

let p0 = [320, 309.48];
let p1 = [478.653, 313.512];
let cp1 = [400, 285];
renderPoint(svg, p0, 'cyan')
renderPoint(svg, p1, 'orange')
renderPoint(svg, cp1, 'blue')

let m1 = interpolatedPoint(p0, cp1);
let m2 = interpolatedPoint(cp1, p1);
renderPoint(svg, m1, 'purple')
renderPoint(svg, m2, 'purple')

let p2 = interpolatedPoint(m1, m2);
renderPoint(svg, p2, 'red');

//new segment
let d0 = `
M 200 296.6
L 400 187.6
L ${p2.x} ${p2.y}
Q ${m1.x} ${m1.y} ${p0.x} ${p0.y}
L200 346.2
`;

poly0.setAttribute('d', d0)

let d1 = `
M 400 187.6 
L 600 324.8
L 600 357.5
L ${p1.x} ${p1.y}
Q ${m2.x} ${m2.y} ${p2.x} ${p2.y}
z
`;

poly2.setAttribute('d', d1)





/**
 * Linear  interpolation (LERP) helper
 */
function interpolatedPoint(p1, p2, t = 0.5) {
    //t: 0.5 - point in the middle
    if (Array.isArray(p1)) {
        p1.x = p1[0];
        p1.y = p1[1];
    }
    if (Array.isArray(p2)) {
        p2.x = p2[0];
        p2.y = p2[1];
    }
    let [x, y] = [(p2.x - p1.x) * t   p1.x, (p2.y - p1.y) * t   p1.y];
    return {
        x: x,
        y: y
    };
}


/**
 * render point
 * accepts coordinate array and point object
 **/
function renderPoint(svg, coords, fill = "red", r = "0.5%") {
    if (Array.isArray(coords)) {
        coords = {
            x: coords[0],
            y: coords[1]
        };
    }
    let marker = `<circle cx="${coords.x}" cy="${coords.y}" r="${r}" fill="${fill}">
      <title>${coords.x} ${coords.y}</title></circle>`;
    svg.insertAdjacentHTML("beforeend", marker);
}

<svg id="svg" viewBox="0 0 800 800" >
    <path id="poly0" d="M200 296.6L400 187.6L400 285L200 346.2Z" fill="#005f73" />
    <path id="poly2" d="M400 187.6L600 324.8L600 357.5L400 285Z" fill="#94d2bd" />
    <path id="poly1" d="
M 200 346.2 
L 320 309.48 
Q 400 285  478.653 313.512
L 600 357.5 
L 600 596.7 
L 467.885 511.684
Q 400 468  320 478.8
L200 495Z" fill="#0a9396" />
</svg>

您實際上并不需要 LERP（線性插值）輔助方法（但它非常方便）。
你可以像這樣得到中間點：

m1 = {x:(x1 x2)/2, y:(y1 y2)/2}  

順便說一句，拆分三次貝塞爾曲線的作業方式類似：
您只需要更多的插值。
請參閱這篇優秀的文章：SVG 中的三次貝塞爾曲線剖析

標籤：javascriptsvg小路曲线贝塞尔曲线

上一篇：如何使Canvas動態渲染到影像大小？

下一篇：在CSS中更改SVG顏色