問題タブ [paperjs]

こんにちは、JavaScript を使用してフロア プラン エディター (MsPaint のようなもの) を作成しようとしています。優先ライブラリとして、EaselJSまたはKinetiJSを最終候補に挙げました。

これらのライブラリを使用して動的な長方形のボックス/ラインを作成する方法を知りたいです。マウスをクリックしてドラッグして（マウスボタンを押したまま）長方形を描くつもりです。したがって、四角形のサイズは、マウスをドラッグした距離によって異なります。

どんな助けでも大歓迎です。fabrisJsやpaperJsのような他のライブラリがより良い代替手段になると誰かが感じた場合、私はこれらのライブラリのソリューションにもオープンです。

Paperjsがどのように機能するかを理解しようとしていますが、テキストベクトルを記述できるかどうかを知りたいのですが、可能であればどのようにしたらよいでしょうか。

この前にRaphael.jsを試しましたが、ほぼ満足していましたが、Paperjsは何らかの理由で（クロス）ブラウザーに準拠しているようですよね？

いくつかの例がいいでしょう！

回答ありがとうございます。

免責事項：これはベクターグラフィックスへの私の最初のアプローチです;）

ユーザーが（図面を作成するために）画像をアップロードしているときにWebアプリを作成しています。彼は、「マスク」として機能するベクター画像（SVG）をアップロードすることになっています。

Paper.jsライブラリを使用しています。

したがって、私の目標は、SVGを読み取り、それを表すpaper.js PathItemを作成することです（次に、fillcolorを追加します）。

シンプルな形で試してみました：

SVGでのそれは次のようになります：

この種の形状の処理は非常に簡単です。points文字列を配列に変換し、パスを作成し.add()て各要素を呼び出します。

問題は、形状が単なる線ではない場合に発生します。たとえば、次のようになります。

湾曲した部分をpaper.jsコマンドに変換する方法が本当にわかりません！SVGには次のような構造が含まれています。

運が悪かったので、W3C svg変換を読み取りましたが、実際にはそのM 74.89,73.117 H 34.605 c -11.32,0 -20.497,-9.177 -20.497,-20.497 v -5.695 c 0,-11.32 9.177,-20.497 20.497,-20.497 H 74.89部分を変換する方法がわかりません。

何か案が？

Paper.js ライブラリを調べています。チュートリアルの最初のコード例は問題なく動作します。しかし、2 番目のコード スニペットのように、インライン JavaScript を外部ファイルに移動すると、画面に何も表示されなくなります。myScript.jsで、試しました

そしてjQueryを使って

成功しませんでした。私は何を忘れましたか？助けてくれてありがとう

paper.js textItem で改行 ( \n ) する方法があるかどうかを理解しようとしています: http://paperjs.org/reference/textitem

どういうわけかそれを箱に入れる方法があるかもしれませんか？正方形の端でブレークラインを設定する必要があります。

アプリケーションを初期化しようとしていますが、紙のjsをスクリプトに正しくロードするのに問題があるようです。AMDローダーとしてrequire.jsを使用しており、shimモジュールを使用して紙のjsを読み込もうとしています。

これが私のコードです：

最初のアラートは正常に機能します（アンダースコア）。これは、正常に読み込まれることを意味しますが、paper.jsを正しく機能させる方法がわからないようです。

どんな助けでも大歓迎です。

私は paper.js から始めています。範囲内で実行される te​​xt/paperscript MIME タイプのスクリプトを持つ可能性が導入されるという事実が気に入っています。ただし、スクリプトはすぐに大きくなる可能性があるため、読みやすくするために複数のスクリプトに分割できるようにしたいと考えています。複数の script タグを追加して、それらをすべて同じスコープで実行できると思っていましたが、明らかにそうではありません。

両方のスクリプトが読み込まれ、実行されますが、2 番目のスクリプトはペーパー スコープに含まれていないようです。

ここに例を設定しました: http://barbata.nl/SO/Maps/この例にはいくつかのコードがありますが、重要な部分を指摘します。

2 つのペーパースクリプトが含まれています。

• Maps.js はメイン スクリプトで、画像をラスタライズして移動できるようにします。このスクリプトのコードは、今のところ問題なく動作するため、無視してかまいません。

• Zoom.js は、ズーム機能を分離したかったスクリプトです。Paper.js にはそのイベントがないように見えるため、jq.mobi を使用してマウスのスクロール ホイールをキャプチャします。次に、Paper と同様の方法で、onMouseScroll の呼び出しに変換します。

ここまでは順調ですね。実際の問題は、zoom.jsのzoomInおよび関数で発生します。zoomOut

明示的に用紙オブジェクトを使用して、ズームしたいビューを参照すると機能します。

しかしpaper、ビューを削除して参照すると失敗します。

スクリプトは Paperscope で実行される Paperscript であると予想していたので、これには驚きました。このコードを Maps.js に入れると問題なく動作するため、Paper.js によって zoom.js が読み込まれますが (ブラウザーの開発者ツールでこれが確認されます)、Paperscope では実行されないようです。

私の質問は次のとおりです。私の調査結果は正しいですか? 私は何か間違ったことをしていますか？読みやすくするために Paper.js アプリケーションを複数のユニットに分割する正しい方法は何ですか?

もちろん、実行することはできますが、正しく実行できるようにしたいと考えています。

ボタンを押してアニメーションをオンにした後でロードしたかっpaperjsたのですが、ページのロード後に用紙をロードすると、ペーパースクリプトが機能しないようです。

コメントアウトしてsetTimeout直接コメントを$.getScript外すと、paperjsがを起動しalert('hi')ます。理解できません。

Windows7x64でChrome23.0.1271.97mを使用しています。誰かがここで何が起こっているのか考えていますか？

基本的に、キャンバスのglobalCompositeOperationを「destination-out」に設定して新しいパスを作成したいと考えています。これは可能ですか？もしそうなら、どのように？

Item にはhttp://paperjs.org/reference/item#blendmodeという blendMode プロパティがあることに気付きましたが、別の値を試しても目的の効果が得られません。