将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图像并使其仅使用POLYLINE？

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>