javascript - 如何使用 javascript 将矢量路径转换为点数组？

Question

我正在尝试从处理跳转到 JavaScript。 通常我在绘图机上工作，对我来说重要的有两件事: 将矢量文件转换为一系列点并通过串行发送。

现在我正在做第一件事，但我找不到解决方案。 在处理时，使用Geomerative库，有一个命令叫做: getPointsInPaths

你知道有一个工具可以在 JavaScript 上做同样的事情吗？ 我尝试查看 paperjs 和 raphaeljs，但没有找到我需要的东西。 谢谢大家!

Answer 1

Raphael 使得提取形状的顶点或定期采样其点变得非常容易:

Working example :

// draw the shape normally
var shape = paper.path(path_str).transform("T-550,-50");

// get vertices of shape
shape.attrs.path.forEach(function(vertex) {
    paper.circle(vertex[1],vertex[2],1)
        .attr("fill", "black")
        .attr("stroke", "none")
        .transform("T-400,-50");    
});

// get points at regular intervals
for (var c = 0; c < Raphael.getTotalLength(path_str); c += 5) {
    var point = Raphael.getPointAtLength(path_str, c);
    console.log(point);
    paper.circle(point.x,point.y,1)
        .attr("fill", "black")
        .attr("stroke", "none")
        .transform("T-250,-50");    

}