创建' n'沿着鼠标创建的矢量线paper.js

时间:2017-10-13 12:12:11

标签: javascript paperjs

我想创建' n'单击鼠标并拖动鼠标时沿鼠标创建矢量线的圆圈数。

这将导致一排圆圈相隔一定距离,具体取决于线条中的圆圈数量。第一个和最后一个圆圈将位于首次单击鼠标然后释放的位置。

示例:如果行长度为1000px,需要3个圆圈,则会出现0px 500px和1000px的圆圈。如果线长1000px且需要5个圆,则会有0px,250px,500px,750px和1000px的点。

我尝试使用以下结果的paper.js,但这不是我需要的。在此示例中,圆圈遵循自由路径并以一定数量的像素间隔开。

Click here to see

另外,在鼠标释放之前看到鼠标线的路径会很好。

1 个答案:

答案 0 :(得分:0)

正如@NicholasKyriakides在他的评论中写道,使用PathgetPointAt(offset)可以最好地实现这一点。

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

Here is the Sketch