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

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

平铺。展平是2D渲染器在渲染过程中使用的术语。展平算法是自适应的。当路径具有高曲率时，它将使多边形点靠得更近。路径变直时，它将使用较少的点。
简单转换。您可以按固定的时间间隔沿着曲线移动，并在每一步采样路径位置。

您在问题中提供的示例代码和输出使您看起来像想要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-1; 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>

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

1 个答案: