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