SVG:生成“概述路径" [英] svg: generate 'outline path'
问题描述
我有一组坐标,可以转换为svg路径(使用三次贝塞尔曲线使之平滑).当我应用特定的笔触宽度时,会得到以下结果(蓝色点是我的坐标)
I have a set of coordinates that I turn into an svg path (using cubic beziers to make it smooth). When I apply a certain stroke width, I get the following result (the blue dots are my coordinates)
我感兴趣的是获得一条围绕灰色形状的路径(例如:在灰色/白色边框上选择任意点,然后四舍五入,直到回到起点).
What I am interested in is to get a path that runs around the gray shape (like: pick any point on the gray/white border, and round around the shape until you're back at the starting point).
我将如何计算这样的路径?
How would I go about computing such a path?
供参考,这是我的svg信息:
for reference, this is my svg info:
<g>
<title>number 3</title>
<path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464" id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none"/>
</g>
推荐答案
我创建了 svgContour 针对类似情况的功能,
产生的轮廓偏移与stroke-width
值无关,必须将其设置为函数的参数.
I created the svgContour function that is thought for scenarios similar to this,
the resulting contour offset is not related to the stroke-width
value and must be set as a parameter to the function.
目前,它一次只能找到一个偏移侧,但是每侧运行一次即可解决此问题.
At the moment it will find one offset side at a time, but running it once per sides you can solve this issue.
TLDR
实际上,通过svgContour可以找到任何svg形状的轮廓,当前它不支持填充模式,但是下一个目标是实现它.
它依靠getPathData()来获取任何SVGGeometryElement的pathData,
然后这些数据将经历三个阶段:
TLDR
Actually through svgContour you can find the contour of any svg shapes, currently it doesn't support fill-modes but one of the next goals is to implement that.
it relies on getPathData() to get the pathData of any SVGGeometryElement,
then this data goes through three phases:
-
redrawSteepCurve
前提:仅抵消曲线的点/控制点,不能获得与另一个平行的beizer曲线,除非曲线足够平坦(在这种情况下,视觉效果会很好);此方法采用SVGPathData,并在发现陡峭曲线的情况下将其分割成足够平坦的状态(返回视觉上等效的SVGPathData).
redrawSteepCurve
Premise: drawing a beizer-curve parallel to another isn't obtained just offsetting the points/control-points of the curve unless the curve is sufficiently flat (in this case the visual rendering will be fine); this method takes a SVGPathData and in case it finds a steep curve it splits it up until it's flat enough (return a visually equivalent SVGPathData).
contourPathData
在此阶段,将pathData按点进行分解,将点按段进行连接,对每个段进行偏移,然后为每个连续的段找到一个交点(我们得到的是偏移点列表).
contourPathData
In this stage the pathData is dissambled in points, points are connected in segments, each segment is offsetted, an intersection point is then found for each contiguous segment ( what we get back is a list of offsetted points).
drawLine
此阶段将步骤2中的点放置在步骤1中的pathData中,最后绘制轮廓.
drawLine
This phase places the points from step 2 in the pathData coming from step 1, and finally draws the contour.
一个例子:
const path = document.querySelector('path')
svgContour(path, 5)
svg {
width: 100vw;
height: 100vh
}
<script src="https://cdn.rawgit.com/fracalo/svg-contour/master/dist/svg-contour.js"></script>
<svg viewBox='300 0 100 200'>
<g>
<title>number 3</title>
<path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464"
id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none" />
</g>
</svg>
轮廓被跟踪!
这篇关于SVG:生成“概述路径"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!