javascript - 将 PATH 从 SVG 转换为 POLYLINE

Question

我正在创建一个算法，我需要你的帮助。我有这个矢量文件(SVG)，我想知道是否有一种方法可以只将这个图像导出/转换为折线 SVG，而不需要弧线，besier...？

像这样:

考虑一个半径为 N 的圆。我想要一个 JS 脚本将此圆路径转换为多条线(我可以根据需要定义多条线)，这样这些线就代表了圆的轮廓。我只想知道每行的起始 X,Y 和结束 X,Y 坐标，以便可以将其导出到这样的 txt 文件:

0,0 100,100(表示从 0,0 到 100,100 画一条线)
100,100 200,200(表示从 100,00 到 200,00 画一条线)
...
..
-100,100 0,0(通过从 -100,100 到 0,0 绘制最后一条线来完成圆)。

我怎么能那样做？我知道 SVG 中的折线可以做到这一点，那么如何获取使用“PATH”的 SVG 图像并使其仅使用折线？

Answer 1

您所说的过程通常称为“扁平化”。这是每个 2D 矢量库作为渲染的一部分所做的。

如果您搜索该术语，您应该能够找到大量有关它的信息。

如果您在可以访问 SVG DOM 的环境中运行(例如浏览器)，您还可以使用方便的 getPointAtLength()路径元素上可用的功能。

var  numPoints = 16;

var  mypath = document.getElementById("mypath");
var  pathLength = mypath.getTotalLength();
var  polygonPoints= [];

for (var i=0; i<numPoints; i++) {
  var p = mypath.getPointAtLength(i * pathLength / numPoints);
  polygonPoints.push(p.x);
  polygonPoints.push(p.y);
}

var  mypolygon = document.getElementById("mypolygon");
mypolygon.setAttribute("points", polygonPoints.join(","));

path {
  fill: none;
  stroke: black;
  stroke-width: 0.5;
}

polygon {
  fill: none;
  stroke: green;
  stroke-width: 0.5;
}

<svg viewBox="0 0 100 100">
  <path id="mypath" d="M 10,50
                       C 0 0 60 0 80,30
                       C 100,60 20,100 10,50"/>
  <polygon id="mypolygon" points=""/>
</svg>