問題タブ [paperjs]

paper.js で「選択範囲のアウトライン」を簡単にカスタマイズする方法は誰でも知っています。"。Paper.js は、選択したアイテムの視覚的なアウトラインを円の上に描画します。このアウトラインのサイズと色をカスタマイズしたいと考えています。例:

Paper JS で非常に単純なビーコンのようなアニメーションを作成しようとしています。円は非常に小さく完全に不透明な状態から始まり、消えてアニメーションが再開するまで大きくなり、透明度が増します。

スケーリングを使用して画像を大きくしていますが、元のサイズにリセットすると問題が発生し、現在、単一の形状で作業するのではなく、2 つ目の円を複製してリセットすることに頼っています。これを行う方法。

これまでの大まかなコードを示すために jsFiddle を作成しました。

http://jsfiddle.net/colethecoder/Y3S9n/1

raphael.jsライブラリでは、パスはSVGパス構文を使用して記述されます（たとえば、M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208zシェイプを作成するための非常にコンパクトな方法を提供します（特に、シェイプがIllustratorなどの外部アプリケーションで描画される場合）。

私はpaper.jsライブラリ（SVGベースではない）の使用に興味がありますが、ドキュメントを最初に見ると、パスがオブジェクトメソッドを介して段階的に構築されていることがわかります。これは非常に異なるアプローチ（「パスの構築」と「パスの説明」と言えます）であり、私のニーズにはあまり適していません。

だから：paper.jsでSVGパスを使用する方法はありますか？または同様の「パスの説明」ソリューション？

参照：

• http://paperjs.org/reference/path
• http://raphaeljs.com/reference.html#Paper.path

paper.jsを使って円を描く方法

画像のように円を描きたいです。各セグメントは独立しており、後でインタラクティブな目的で使用されます。

私は何かを試しました

そして、それは以下のようなものをレンダリングします

paper.js は初めてです。

このプロジェクトでは、多くのインスタンス (塗りつぶしの色が異なる) で使用される形状が必要なので、(Path.clone() メソッドを使用する代わりに) シンボルを使用する方が明らかに優れています。ただし、シンボルをplacedSymbolにインスタンス化すると、fillColorプロパティを変更してもレンダリングされた形状には影響がないように見えます.シンボルの初期色のままです.

位置や不透明度などのその他のプロパティは正常に設定されています。

私の質問: シンボルの各インスタンスの塗りつぶしの色を変更するにはどうすればよいですか?

ここの jsFiddle: http://jsfiddle.net/GlauberRocha/uTskY/ (すべてのコードを HTML ペインに配置したことに注意してください。それ以外の場合は動作しないようです。おそらく paperscript はプレーンな JavaScript ではないためです)。

Paperscript コード:

paper.js を使用してプロジェクト内の現在のすべてのアイテムをシリアル化する方法はありますか? 彼らの位置、スタイルなどは？

マウスPaper.jsで描画します。これらのストロークを維持し、ビデオ再生と同じ速度で再生する必要があります。どうすればこれを達成できますか？

たとえば、あるキャンバスオブジェクトが別のキャンバスオブジェクトと交差しているかどうかを検出したい

たとえば、2つの円が動いています

私はpaper.jsライブラリを使用しています

c1がc2に当たったときを検出したい

私は、通常の paperscript ルートを使用するのではなく、javascript を介して紙を制御する必要があるプロジェクトに取り組んでいます。私は現在、理解できない奇妙な動作のために立ち往生しています。ここに私が実行しているコードの簡略化されたバージョンがあります

何らかの理由で、このコードは空白のキャンバスになります。奇妙なのはnew Ship(...)、数秒後に開発コンソールを呼び出すと、キャンバス上でラスターが正常にレンダリングされることです。また、 の値を見ると、サイズが 32, 32 の canvas 要素が表示されることにも気付きましたGame.ship.elem.__canvas。そのような canvas は DOM に存在しません。

これはタイミングと関係があると思いますが、 setTimeout を使用して数秒後にラスターを作成するという非常に厄介なアプローチを除いて、それを機能させるために何をしなければならないかを理解できないよう$(document).ready()です呼ばれた。

ここで何が起こっているのか、または私を正しい方向に導くことができる何かについて誰か考えがありますか?

このようなインターフェースを作りたい

これがユーザーができることです

1-人を互いに接続する2-各人に関する情報を表示する（バルーン）3-接続を失うことなくこれらのオブジェクトを移動する

次に、ajaxを使用してこれらの接続情報を保存し、誰が誰に接続しているかを確認できるようにします。また、ユーザーが次にページを表示したときに、これらの図を再描画する必要があります。

jsPlumb、paperjs、およびraphaelはすべてこれを実行できるようで、さらに多くのことができるようです。私の質問は、どちらがこのニーズに適しているかということです。