将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中的折线可以做到这一点，所以如何获取一个使用＆＃34; PATH＆＃34;的SVG图像。并使其仅使用POLYLINE？

Answer 1

您正在谈论的过程通常被称为＆＃34;展平＆＃34;。这是每个2D矢量库作为渲染的一部分。

如果你搜索那个词，你应该可以找到很多信息。

如果您在可以访问SVG DOM（如浏览器）的环境中运行，您还可以使用路径元素上提供的方便的getPointAtLength()函数。

＆＃13;

＆＃13;

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(","));

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;