マウスで作成したベクトル線に沿って '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

答えて

関連する問題