我需要一个并行的 SVG 路径。 我的路径为“M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z”。 设 Offset 为 2px。
原始路径 O/P: Path Image 进一步划分时的路径段:
0: ["M", 0, 0]
1: ["H", 50]
2: ["A", 20, 20, 0, 1, 0, 100, 50]
3: ["V", 75]
4: ["C", 50, 125, 0, 85, 0, 85]
有什么算法或方法可以找到单个段或整个段的偏移路径？？
更新图片: 红线代表我需要获取的偏移 SVG 图像。 Example Offset SVG Path
最佳答案
算法解决方案
偏移线相对微不足道。对于圆弧，可以通过将两个半径更改相同的值来求解。 (你仍然需要找到终点。)
问题是贝塞尔曲线。有图书馆bezier.js从数学上解决了这个问题。有关背景，请参阅 Pomax 的配套“贝塞尔曲线入门”，尤其是有关 curve offsetting 的章节.
正如那里所指出的，不可能找到一条贝塞尔曲线来抵消另一条曲线；你需要把它分成“更简单”的子部分。该库实现了一个将这些部分再次组合并返回偏移路径的函数:.offset(d)。
图形解决方案
矢量图形 GUI 实现了这类功能。下面是针对 Inkscape 的描述，但我相信 Adobe Illustrator(也许还有 Sketch)也能或多或少地做同样的事情。
- 画出你的路径。 Inkscape 有一个“XML 编辑器”，您可以在其中直接输入路径定义字符串。
- 移除填充并定义一个宽度为您想要实现的偏移量两倍的笔触。
- 从“路径”菜单中选择“描边到路径”。
- 从“路径”菜单中选择“分离”。
- 现在你有两条(填充的)路径，一条向外偏移，一条向内偏移；丢弃不需要的。
请注意，您的路径定义无效。点 [50, 0] 和 [100, 50] 之间的圆弧的半径为 20，但两点之间的距离为 70.71。按照spec ，路径改为绘制为
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
如果我用 Inkscape 找到一个插入 2 的路径，我得到
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
请注意，Inkscape 已为弧段计算了三次贝塞尔曲线近似值。您只需将半径增加 2、更改大弧标志并保留端点即可恢复为圆弧:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
关于javascript - 查找平行或偏移 SVG 路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53411999/