将PATH从SVG转换为POLYLINE [英] Convert PATH from SVG to POLYLINE

问题描述

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

I am creating an algorithm and I need your help. I have this vector file (SVG) and I would like to know if is there a way I can export/convert this image to polylines SVG only without arc, besier...?

这样的事情：

想想一个圆圈半径为N.我想要一个JS脚本将这个圆形路径转换为多条线（我可以根据需要定义多条线），使得这些线代表圆的轮廓。我只想知道每行的起始X，Y和结束X，Y坐标，所以我可以将它导出到这样的txt文件：

Think about a circle with radius N. I would like a JS script to convert this circle path to multiple lines (which I could define as many as I want) in such a way that those lines represent the outline of the circle. I just would like to know the start X,Y and end X,Y coordinates of every line so I could export it to a txt file like this:

0,0 100,100（表示从0,0到100,100画一条线）
100,100 200,200（表示从100,00到200,00画一条线）
...
..
-100,100 0,0（通过绘制从-100,100到0,0的最后一行来完成圆圈。）

0,0 100,100 (which means draw a line from 0,0 to 100,100) 100,100 200,200 (which means draw a line from 100,00 to 200,00) ... .. -100,100 0,0 (finishes the circle by drawing the last line from -100,100 to 0,0).

我怎么能这样做？我知道SVG中的折线是这样的，那么如何获取使用PATH并使其仅使用POLYLINE的SVG图像？

How could I do that? I know polyline in SVG does that, so how can I grab an SVG image that makes use of "PATH" and make it use ONLY POLYLINE?

推荐答案

你所谈论的过程通常被称为扁平化。这是每个2D矢量库作为渲染的一部分所做的事情。

The process you are talking about is generally called "flattening". It is what every 2D vector library does as part of rendering.

如果您搜索该术语，您应该可以在其上找到大量信息。

You should be able to find plenty of info on it if you search on that term.

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

If you are running in an environment with access to the SVG DOM (like a browser), you could also use the handy getPointAtLength() function available on path elements.

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>

这篇关于将PATH从SVG转换为POLYLINE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！