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