将SVG路径转换为多边形坐标

Question

我需要一个函数或插​​件来将SVG路径的路径命令转换为多边形点。

我发现了一个： https : //github.com/Phrogz/svg-path-to-polygons

这里的问题是它不支持A和C之类的弧和曲线。

 let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10'; let points = pathDataToPolys(pathData, {tolerance:1, decimals:1}); console.log(points); /******************************************************************* [ [ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ] ] 

我的路径为'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'。 我需要将其转换为多边形点。

任何帮助或建议，高度赞赏。

Answer 1

我认为有些困惑，因为您不清楚要寻找哪种转换。 有两种难度不同的解决方案。

1. 展平 。 展平是2D渲染器在渲染过程中使用的术语。 展平算法是自适应的。 当路径具有高曲率时，它将使多边形点靠得更近。 当路径更直时，它将使用更少的点。

2. 简单转换 。 您可以按规则的间隔沿曲线移动，并在每一步采样路径位置。

您在问题中提供的示例代码和输出使其看起来像您想要的Flattening类型。

但是，如果您不大惊小怪，那么选项2真的很简单。 SVG包含为此任务设计的API。

 var NUM_POINTS = 6; var path = document.getElementById("test"); var len = path.getTotalLength(); var points = []; for (var i=0; i < NUM_POINTS; i++) { var pt = path.getPointAtLength(i * len / (NUM_POINTS-1)); points.push([pt.x, pt.y]); } console.log("points = ", points); 

 <svg> <path id="test" d="M5,15 c5.5,0 10-4.5 10,-10 h10"/> </svg>