svg:生成'大纲路径'

Question

我有一组坐标,我变成了svg路径(使用立方贝塞尔曲线使其平滑).当我应用一定的笔画宽度时,我得到以下结果(蓝点是我的坐标)

我感兴趣的是获得一条围绕灰色形状的路径(例如:选择灰色/白色边框上的任何点,并围绕形状进行环绕,直到您回到起点).

我将如何计算这样的路径？

供参考,这是我的svg信息:

 <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>

Answer 1

我创建了svgContour函数，该函数被认为适用于与此类似的场景，
生成的轮廓偏移与值无关stroke-width，必须设置为函数的参数。

目前，它一次会找到一个偏移侧，但每侧运行一次就可以解决这个问题。

TLDR
实际上通过 svgContour 你可以找到任何 svg 形状的轮廓，目前它不支持填充模式，但下一个目标之一是实现它。它依赖 getPathData() 来获取任何 SVGGeometryElement 的 pathData，然后该数据经历三个阶段：

• redrawSteepCurve
  前提：绘制一条与另一条平行的贝泽曲线并不能仅仅通过偏移曲线的点/控制点来获得，除非曲线足够平坦（在这种情况下，视觉渲染会很好）；此方法采用 SVGPathData，如果它发现陡峭的曲线，则会将其分割，直到它足够平坦（返回视觉上等效的 SVGPathData）。

• 轮廓路径数据
  在此阶段，路径数据以点为单位进行分解，点以段的形式连接，每个段都被偏移，然后为每个连续的段找到一个交点（我们得到的是偏移点的列表）。

• drawLine
  此阶段将步骤 2 中的点放置在步骤 1 中的 pathData 中，最后绘制轮廓。

一个例子：

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>

轮廓已描出！