查找平行或偏移 SVG 路径

Question

我需要一个并行的 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

Answer 1

我知道你有这条路，你需要沿着边界在里面画一条线。我的解决方案是将 <feMorphology> 过滤器与 operator="erode" 一起使用。我希望这是你需要的。

<svg viewBox="-10 -10 120 120" width="300">
 <defs>
   
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>

   
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>


</filter>
<path id="g" d="M0, 0
         H50
         A20, 20, 0, 1, 0, 100, 50
         V75
         C50, 125, 0, 85, 0, 85" />
</defs>

<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" /> 
<use xlink:href="#g" filter="url(#erode1)" /> 
</svg>

Answer 2

算法求解

偏移线相对微不足道。对于圆弧，可以通过将两个半径更改相同的值来求解。（你仍然需要找到终点。）

问题是贝塞尔曲线。有一个图书馆 bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.

正如那里所指出的，不可能找到一条贝塞尔曲线来抵消另一条曲线；您需要将其分成 "simpler" 个子部分。该库实现了一个将这些部分再次组合并返回偏移路径的函数：.offset(d).

图形解

矢量图形 GUI 实现了这类功能。下面是针对 Inkscape 的描述，但我相信 Adobe Illustrator（也许还有 Sketch）也可以做或多或少相同的事情。

画出你的路径。 Inkscape 有一个 "XML editor"，您可以在其中直接输入路径定义字符串。
移除填充并定义一个宽度为您想要实现的偏移量两倍的笔画。
从 "Path" 菜单中选择 "Stroke to Path"。
从 "Path" 菜单中选择 "Break Apart"。
现在你有两条（填充的）路径，一条向外偏移，一条向内偏移；丢弃不需要的。

顺便说一下，您的路径定义无效。点 [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

查找平行或偏移 SVG 路径

Find Parallel or Offset SVG path

javascript

math

svg

polygon