查找平行或偏移SVG路径 [英] Find Parallel or Offset SVG path

问题描述

我需要一个并行的SVG路径. 我的路径为'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. 设置偏移"为2px.

I need a parallel SVG path. I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. Let Offset be 2px.

原始路径O/P: 路径图片 进一步细分时的路径细分:

Original Path O/P: Path Image Path Segments when further divided:

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]

找到单个段或整个段的偏移路径的任何算法或方法?

Any algorithm or way to find the offset path for individual segments or on whole??

更新的图像: 红线代表偏移的SVG图像，我需要获取. 示例SVG路径偏移

Updated Image: Red lines represent the offset SVG image, I need to get. Example Offset SVG Path

推荐答案

算法解决方案

抵消线是相对琐碎的.对于圆弧，可以通过将两个半径更改相同的值来解决. (您仍然必须找到终点.)

Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)

问题是贝塞尔曲线.有一个库 bezier.js 用数学方法解决了这个问题.对于背景，请查看Pomax随附的贝塞尔曲线上的底漆"，特别是曲线偏移.

The problem are Bezier curves. There is a library 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.

正如那里指出的那样，不可能找到一条抵消另一条曲线的贝塞尔曲线.您需要将其分为更简单"的子部分.该库实现了再次组合这些部分并返回偏移路径.offset(d).

As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d).

实用解决方案

矢量局部图形用户界面(GUI)实现了这种事情.以下针对Inkscape进行了描述，但是我确信Adobe Illustrator(也许还有Sketch)可以或多或少地做到这一点.

Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.

• 画出你的路. Inkscape有一个"XML编辑器"，您可以在其中直接输入路径定义字符串.
• 删除填充并定义笔划，其宽度是您要实现的偏移量的两倍.
• 从路径"菜单中选择笔触路径".
• 从路径"菜单中选择分离".
• 现在您有两条(填充的)路径，其中一条相对于外部偏移，一条相对于内部偏移；丢弃不需要的东西.

请注意，您的路径定义无效.点[50，0]和[100，50]之间的圆弧的半径为20，但两个点之间的弧距为70.71.根据规范，路径改为绘制为

Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as

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插入的路径，我会得到

If I find a path inset by 2 with Inkscape, I get

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已为弧段计算了三次Bezier近似值.您可以简单地通过将半径增加2来更改为圆弧，更改较大的圆弧标志并保留端点:

Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:

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路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！