morphicons源码数学篇任意SVG路径如何统一为三次贝塞尔弧长重采样与角点锚定算法详解【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphiconsmorphicons 是一个零依赖的SVG 图标变形icon morphing库任意两个描边图标之间都能平滑互变旋转不是手写的而是从数学里长出来的。而一切变形的地基是把五花八门的 SVG 路径统一为三次贝塞尔曲线cubic Bézier再按弧长重采样成等距点列、锚定角点防止尖角被磨圆。本文带你走读这条数学流水线 。为什么变形前必须统一语言两个图形要逐点插值前提是它们能一一对应。但 SVG 的路径世界非常混乱单条d属性里就有 M / L / H / V / C / S / Q / T / A / Z 十种命令图标还可能由circle、rect、ellipse、polyline、polygon等原始图元拼成。morphicons 的解法是两阶段降维先解析再规范化最终每种输入都变成同一串数据——纯三次贝塞尔段。第一阶段解析 d 属性src/core/parse.tsparse.ts 手写了一个字符级扫描器不依赖DOMParser浏览器/Node/SSR 行为一致它只做语法归一不做几何转换相对命令c、s、q…统一转为绝对坐标简写命令展开H/V→LS/T通过反射前一个控制点2·当前点 − 上一个控制点展开为C/Q见 parse.ts 第 183-184 行支持隐式重复、M后多对坐标的隐式 lineto、打包的圆弧 flag如011 1和科学计数法。输出是一组RawSubpath每条只含L / C / Q / A四种绝对命令——注意A圆弧此刻还留着原样留给下一步处理。第二阶段一切降为三次贝塞尔src/core/normalize.tsiconToCubics() 是入口d字符串或IconNode列表都会进入同一条builder流水线最终产物是Float64Array打包的点列[p0, c1, c2, p1, c1, c2, p2, …]定义在 types.ts相邻段共享端点。降维规则只有三条规则一直线 → 共线控制点把控制点放在起终点的⅓ 和 ⅔处曲线退化为直线但数据结构上它仍是合法的三次贝塞尔normalize.ts 第 51-61 行。规则二二次贝塞尔 → 精确升阶二次曲线升三次不需要近似控制点取P0 ⅔(P1−P0)和P3 ⅔(P2−P3)即可精确表示原曲线normalize.ts 第 63-72 行。规则三圆弧 → 中心参数化切片这是全库最重的数学完整实现了 SVG 规范附录F.6的端点→中心转换normalize.ts 第 74-150 行半径不足时先按 F.6.6等比放大λ √((x²/rx² y²/ry²))保证弧线画得出来求出椭圆中心与起止角 θ₁、Δθ把整段弧切成 ≤90° 的片每片用一条三次贝塞尔逼近控制点偏移量取α (4/3)·tan(Δθ/4)——90° 片时它就是著名的Kappa 常数(4/3)·tan(π/8) ≈ 0.5523normalize.ts 第 11 行也是圆/圆角矩形近似用的常数最后一片的终点直接取精确端点而非三角函数计算值消除浮点漂移。circle、ellipse直接由 4 个 Kappa 片拼成rect的圆角同理直线段与四分之一椭圆交替rectPath 函数。 序列化时serialize.ts 把坐标量化到 4 位小数不同 JS 引擎的三角函数末位 ulp 不同量化后字节才稳定SSR 水合才不会在带非正交弧的图标如 lucide 的 eye上报 mismatch。第三阶段弧长重采样——如何量出一条曲线的长度到这里两个图标都变成了三次贝塞尔链但段数、点数各不相同无法逐点插值。resample.ts 的任务是在每条子路径上均匀地数出 N 个点默认 64间距按弧长相等。难点有二。难点一三次贝塞尔弧长没有闭式解弧长 ∫|B′(t)| dt这个积分积不出来。morphicons 的解法8 点 Gauss-Legendre 求积节点在 [−1,1] 上对称所以只存半个表resample.ts 第 16-21 行对每条段做一次积分即得段长见 segLen()弧长反演给定目标弧长 s求参数 t 使 ∫₀ᵗ|B′| s。用带保护的牛顿法每次迭代用精确导数|B′(t)|做牛顿步若新点跳出二分括号就退回二分中点invert() 函数。|B′| 恰好是目标函数的精确导数所以收敛又快又稳。难点二角点锚定——尖角不能磨圆如果纯按弧长撒点直角、箭头尖这些切线不连续的拐点会落在采样间隙里变形途中被悄悄磨圆——这是图标变形最常见的廉价感来源。morphicons 的对策检测角点取每条段的入/出切线切线 端点与相邻控制点之差退化时向后找一个控制点见 tangent()两切线夹角超过阈值22.5°CORNER_THRESHOLD π/8的段边界记为角点即 detectCorners()锚定为精确采样点角点直接抄录原始坐标进输出不参与弧长插值闭合路径只认角点、不认起点同一个圆从不同 M 点开始书写采样结果应当完全一致只是索引旋转起点的歧义留给后续 Procrustes 的循环对应去解决resamplePath 第 165-176 行锚点之间的跑段run内部才按弧长均匀分配剩余点数。数字怎么分最大余数法保证精确凑齐 N锚点把一条路径切成若干 run需要把 N−1 个区间闭合路径为 N精确分给各 run先按 run 弧长比例分配并向下取整且每个 run 至少 1 个区间剩余的区间用最大余数法largest remainder分给小数部分最大的 run保证总和恰好等于 N−1一个精妙的细节比较小数大小时先把分数量化到 1e9resample.ts 第 203-209 行——数值积分的 ~1e-15 浮点噪声绝不能参与平票裁决否则两个旋转后全等的图标会分到不同的点数Procrustes 的精确全等就丢了。这样 resampleIcon() 输出的每条子路径都是Float64Array(2N)的等弧长点列成为整个库内部流通的货币——plan.ts 的 2D Procrustes 对齐和 interpolate.ts 的极坐标插值线性角度 对数线性缩放都在这串点上做文章。总结7KB 变形库背后的数学流水线把 morphicons 的核心串起来是一条紧凑的流水线全部位于 src/core/阶段文件数学手段语法解析parse.ts控制点反射展开简写命令统一为三次贝塞尔normalize.ts⅓/⅔ 共线点、二次升阶、F.6 圆弧切片 Kappa等弧长重采样resample.tsGauss-Legendre 求积、牛顿二分反演、22.5° 角点锚定、最大余数分配对应与对齐plan.ts闭式 2D Procrustes无 SVD纯 atan2插值interpolate.ts角度线性、缩放对数线性、质心块搬运对应的测试可以边读边跑test/parse.test.ts、test/normalize.test.ts、test/resample.test.ts 覆盖了路径解析、圆角矩形回环精度和角点锚定的各种边界情况。下次看到图标平滑变形时不妨想想先被翻译成同一种曲线语言再被等距数点、守住尖角旋转才显得毫不费力 ✨。【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
morphicons源码数学篇任意SVG路径如何统一为三次贝塞尔弧长重采样与角点锚定算法详解【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphiconsmorphicons 是一个零依赖的SVG 图标变形icon morphing库任意两个描边图标之间都能平滑互变旋转不是手写的而是从数学里长出来的。而一切变形的地基是把五花八门的 SVG 路径统一为三次贝塞尔曲线cubic Bézier再按弧长重采样成等距点列、锚定角点防止尖角被磨圆。本文带你走读这条数学流水线 。为什么变形前必须统一语言两个图形要逐点插值前提是它们能一一对应。但 SVG 的路径世界非常混乱单条d属性里就有 M / L / H / V / C / S / Q / T / A / Z 十种命令图标还可能由circle、rect、ellipse、polyline、polygon等原始图元拼成。morphicons 的解法是两阶段降维先解析再规范化最终每种输入都变成同一串数据——纯三次贝塞尔段。第一阶段解析 d 属性src/core/parse.tsparse.ts 手写了一个字符级扫描器不依赖DOMParser浏览器/Node/SSR 行为一致它只做语法归一不做几何转换相对命令c、s、q…统一转为绝对坐标简写命令展开H/V→LS/T通过反射前一个控制点2·当前点 − 上一个控制点展开为C/Q见 parse.ts 第 183-184 行支持隐式重复、M后多对坐标的隐式 lineto、打包的圆弧 flag如011 1和科学计数法。输出是一组RawSubpath每条只含L / C / Q / A四种绝对命令——注意A圆弧此刻还留着原样留给下一步处理。第二阶段一切降为三次贝塞尔src/core/normalize.tsiconToCubics() 是入口d字符串或IconNode列表都会进入同一条builder流水线最终产物是Float64Array打包的点列[p0, c1, c2, p1, c1, c2, p2, …]定义在 types.ts相邻段共享端点。降维规则只有三条规则一直线 → 共线控制点把控制点放在起终点的⅓ 和 ⅔处曲线退化为直线但数据结构上它仍是合法的三次贝塞尔normalize.ts 第 51-61 行。规则二二次贝塞尔 → 精确升阶二次曲线升三次不需要近似控制点取P0 ⅔(P1−P0)和P3 ⅔(P2−P3)即可精确表示原曲线normalize.ts 第 63-72 行。规则三圆弧 → 中心参数化切片这是全库最重的数学完整实现了 SVG 规范附录F.6的端点→中心转换normalize.ts 第 74-150 行半径不足时先按 F.6.6等比放大λ √((x²/rx² y²/ry²))保证弧线画得出来求出椭圆中心与起止角 θ₁、Δθ把整段弧切成 ≤90° 的片每片用一条三次贝塞尔逼近控制点偏移量取α (4/3)·tan(Δθ/4)——90° 片时它就是著名的Kappa 常数(4/3)·tan(π/8) ≈ 0.5523normalize.ts 第 11 行也是圆/圆角矩形近似用的常数最后一片的终点直接取精确端点而非三角函数计算值消除浮点漂移。circle、ellipse直接由 4 个 Kappa 片拼成rect的圆角同理直线段与四分之一椭圆交替rectPath 函数。 序列化时serialize.ts 把坐标量化到 4 位小数不同 JS 引擎的三角函数末位 ulp 不同量化后字节才稳定SSR 水合才不会在带非正交弧的图标如 lucide 的 eye上报 mismatch。第三阶段弧长重采样——如何量出一条曲线的长度到这里两个图标都变成了三次贝塞尔链但段数、点数各不相同无法逐点插值。resample.ts 的任务是在每条子路径上均匀地数出 N 个点默认 64间距按弧长相等。难点有二。难点一三次贝塞尔弧长没有闭式解弧长 ∫|B′(t)| dt这个积分积不出来。morphicons 的解法8 点 Gauss-Legendre 求积节点在 [−1,1] 上对称所以只存半个表resample.ts 第 16-21 行对每条段做一次积分即得段长见 segLen()弧长反演给定目标弧长 s求参数 t 使 ∫₀ᵗ|B′| s。用带保护的牛顿法每次迭代用精确导数|B′(t)|做牛顿步若新点跳出二分括号就退回二分中点invert() 函数。|B′| 恰好是目标函数的精确导数所以收敛又快又稳。难点二角点锚定——尖角不能磨圆如果纯按弧长撒点直角、箭头尖这些切线不连续的拐点会落在采样间隙里变形途中被悄悄磨圆——这是图标变形最常见的廉价感来源。morphicons 的对策检测角点取每条段的入/出切线切线 端点与相邻控制点之差退化时向后找一个控制点见 tangent()两切线夹角超过阈值22.5°CORNER_THRESHOLD π/8的段边界记为角点即 detectCorners()锚定为精确采样点角点直接抄录原始坐标进输出不参与弧长插值闭合路径只认角点、不认起点同一个圆从不同 M 点开始书写采样结果应当完全一致只是索引旋转起点的歧义留给后续 Procrustes 的循环对应去解决resamplePath 第 165-176 行锚点之间的跑段run内部才按弧长均匀分配剩余点数。数字怎么分最大余数法保证精确凑齐 N锚点把一条路径切成若干 run需要把 N−1 个区间闭合路径为 N精确分给各 run先按 run 弧长比例分配并向下取整且每个 run 至少 1 个区间剩余的区间用最大余数法largest remainder分给小数部分最大的 run保证总和恰好等于 N−1一个精妙的细节比较小数大小时先把分数量化到 1e9resample.ts 第 203-209 行——数值积分的 ~1e-15 浮点噪声绝不能参与平票裁决否则两个旋转后全等的图标会分到不同的点数Procrustes 的精确全等就丢了。这样 resampleIcon() 输出的每条子路径都是Float64Array(2N)的等弧长点列成为整个库内部流通的货币——plan.ts 的 2D Procrustes 对齐和 interpolate.ts 的极坐标插值线性角度 对数线性缩放都在这串点上做文章。总结7KB 变形库背后的数学流水线把 morphicons 的核心串起来是一条紧凑的流水线全部位于 src/core/阶段文件数学手段语法解析parse.ts控制点反射展开简写命令统一为三次贝塞尔normalize.ts⅓/⅔ 共线点、二次升阶、F.6 圆弧切片 Kappa等弧长重采样resample.tsGauss-Legendre 求积、牛顿二分反演、22.5° 角点锚定、最大余数分配对应与对齐plan.ts闭式 2D Procrustes无 SVD纯 atan2插值interpolate.ts角度线性、缩放对数线性、质心块搬运对应的测试可以边读边跑test/parse.test.ts、test/normalize.test.ts、test/resample.test.ts 覆盖了路径解析、圆角矩形回环精度和角点锚定的各种边界情况。下次看到图标平滑变形时不妨想想先被翻译成同一种曲线语言再被等距数点、守住尖角旋转才显得毫不费力 ✨。【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
