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

我正在尝试从处理跳转到JavaScript。通常我在绘图机上工作，对我来说是重要的两件事：将矢量文件转换为一系列点并通过串行发送。如何使用javascript将矢量路径转换为点数组？

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

你知道一个工具可以在JavaScript上做同样的事吗？我试图寻找paperjs和raphaeljs，但没有找到我所需要的。谢谢大家！

2014-06-16 piLeoni

拉斐尔使得它很容易要么提取形状的顶点或定期品尝它的要点：

enter image description here

// 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");  

}

来源

2014-06-22 14:37:38

谢谢，它非常接近我所需要的，但有两件事我不明白：在这种情况下svg是在文档中定义的，在raphael中存在的是从浏览器外部导入它的方法？第一个例子中，我们只取一个多边形的顶点，或者我们也可以近似也由曲线组成的图形？ – piLeoni

当然：对于具有曲线的形状，您会希望使用后一种方法，因为“顶点”的含义不太清晰：http://jsfiddle.net/chriswilsondc/L4xgj/3/ 如果要提取路径从SVG提前，而不是在DOM上找到字符串，就像我在本例中所做的那样，使用http://www.readysetraphael.com/ –

克里斯感谢您的帮助，我找到你的在线工具非常有用，我每天都在学习更多的东西。我意识到我必须采取一些措施，因为对于我而言，JS内部的元素结构在网页内部工作还不够清楚。

但我要问你一件事：这将是很难做出了一步，得到这样的：

1）您在readysetraphael提示打开一个页面，就像问你选择上的一个文件电脑。 2）svg是如此加载，但你没有收到改变svg代码复制和粘贴，它直接加载到页面，并提取点。

我试图arrivre从装载作为外部链接到该文档，如从这样的SVG选择属性“d”：

  <svg id = "mySvg" height = "60" width = "60" 
      xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink"> 
   <image x="0" y="0" xlink:href="your.svg" width="60" height="60" /> 
</ svg>

但没有更迭。

来源

2014-06-27 10:59:37 piLeoni

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

回答

相关问题