沿着鼠标创建的矢量线创建“n”圈paper.js

我想在鼠标单击并拖动时沿着鼠标创建的矢量线创建'n'个圆。沿着鼠标创建的矢量线创建“n”圈paper.js

这将导致一排圆圈，这将是一定的距离，取决于行中的圆圈数量。第一个和最后一个圆圈将位于鼠标首次点击后释放的位置。

示例：如果线条长度为1000px，需要3个圆圈，则会有一个0px 500px和1000px的圆圈。如果线条长1000px，需要5个圆圈，则会有0px，250px，500px，750px和1000px的点。

我试图在paper.js中得到以下结果，但这并不是我所需要的。在这个例子中，圆圈遵循自由路径，并且被设定数量的像素间隔开。

Click here to see

作为一个额外的，它会很高兴地看到鼠标线的路径释放鼠标之前。

来源

2017-10-13 RouthMedia

['getPointAt（胶印）']（http://paperjs.org/reference/path/#getpointat-offset）是你的朋友 –

谢谢。这看起来简单得多，我的解决方案:) http://sketch.paperjs.org/#S/VVJNb8IwDP0rUS+kKpSh3Sg7MWmnaUjsNqYpNB5ELTZKUnpA/PfF6QeslzrvOc/Pdq4JqhMky2RbgS+PyTQpSfO5Ngg/nqgWLwKhFZ8hlGmxw5HICd+pcfBq1SEk/TZYekMoJFwAfSquO7woKw6WmnMv8sZxVOk455X1DpQP/KLoMEA9IE89ZKl14Twws/u94kGHM7hyrqnFDRn0d8WROz/gNWDAu7szzhrVgA0zPReSi6c9YwI8mCoba4PihtwgEttqj6YGIY1YRdvZIg5ChG+H8zn/2bfrKx3VGfrZbDnO18aWNUgGYgvyXiadimc2Ei/lzluqYE012SAw2deqrCYjq5VXOW928MZFMxP4uI5cab0ORrWM6az6r52HwyyOIySYLCu6Nm6DioUTXeAD+ QXErd7C + 9lbUFUcs0uWX9 + 3Pw == – RouthMedia

尽管你仍然没有使用'getPointAtOffset' –

正如@NicholasKyriakides在他的评论中写道的，这可以使用Path和getPointAt(offset)来实现。

我已经在你的代码示例中实现了它，并使它更通用，所以你可以使用任何路径，而不仅仅是一条直线。我还用SymbolItem的实例替换了您的圈子项目，因为它们共享大量数据，所以效率更高。

Here is the Sketch

来源

2017-11-28 07:42:59 Waruyama

沿着鼠标创建的矢量线创建“n”圈paper.js

回答

相关问题