微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将SVG转换成点序列

如何解决将SVG转换成点序列

给定一个SVG,是否有一个库可以帮助我将文件的任何路径转换为位于路径上的点序列,两个连续点之间的路径长度为1(或某个其他常数)?

解决方法

不需要图书馆。 SVGGeometryElement API通过几行代码即可实现这一点:

function getPointsAlongPath (path,distance) {
  const length = path.getTotalLength();
  const points = [];

  for (let step = 0; step <= length; step = step + distance) {
    points.push(path.getPointAtLength(step));
  }
  
  return points;
}

const result = getPointsAlongPath(document.querySelector('circle'),5);
console.log(result.map(p => [p.x,p.y]));
<svg width="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="black" />
</svg>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。