web-dev-qa-db-ja.com

CanvasとAngularJSを使用する

次のFlashアプリをHTML5で書き直す作業を始めています。

http://www.docircuits.com/circuit-editor

これまでのアプリの複雑さと私のR＆Dを考えると、AngularJSを実装の優先MVCフレームワークとして特定しました。このアプリには、パネル、メニュー、プロパティ、チャートなどのさまざまな部分があり、それらはすべてAngularJSで簡単に実装できると考えています。

ただし、重要な問題は、コンポーネントのデザインと相互作用（ドラッグ/ドロップ、移動、ワイヤ処理など）がCanvasベースである必要があることです。これは、 CreateJSツールキット（ http://www.Adobe.com/in/products/flash/flash-to-html5.html ）をSVGではなくCanvasライブラリに追加します。

問題は、「キャンバス内の個々のオブジェクト」とAngularJSの間で通信する明確な方法がないことです。次の例を見てきましたが、ほとんどすべてがCanvasオブジェクトで機能し、Canvas内の個々のコンポーネントを処理することではありません。

AngularJSのWebGLへのバインド/キャンバス

AngularJS用のキャンバス描画ディレクティブは既にありますか？

私はここで立ち往生しており、何をすべきかわからない。いくつかのコメントを本当に感謝します：

  • AngularJSが正しい選択かどうか？

  • Canvasパーツを別のライブラリ（Fabric.js、kinect.js、Easel.jsなど）に実装して、Angular（今のところタスクが大きすぎるようです）と統合する必要があります） ？

  • 上記のいずれでもない場合、キャンバス、パネル、メニュー、チャートなどの他の機能を簡単に処理できる他のフレームワークに切り替える必要がありますか？

angularjscanvashtml5-canvas
38
Kapil Kaushik

最終的に、AngularJSとHTML5 Canvasを一緒に使用することができました。ここで、私たちの要件とそれを達成するために私たちが従ったアプローチを簡単に共有します。

要件は、次のように少し難しいものでした。

  1. キャンバス内の個々の要素のイベントハンドルを処理し、AngularJSのデータに基づいてこれらの要素を動的に追加できます

  2. データの表示のみにCanvasを使用しながら、AngularJSの個々の要素ごとにデータを保持します。

  3. 特定の場合にデータの特別な処理にコントローラーの継承を使用します（たとえば、すべてのインスタンスは移動可能でドラッグ可能である必要がありますが、一部のインスタンスは点滅したり、一部のカラーバンドを表示したりする必要がある場合があります）

Canvasの操作を処理するために、2つの部分に分割しました。

  1. キャンバスサービス

    それはの仕事をします

    • キャンバスの初期化

    • キャンバスに要素を追加または削除する

    • キャンバスを更新する

  2. インスタンスディレクティブとコントローラー

    • angularコントローラは、対応する「キャンバス要素」のハンドルと、それに関連付けられているすべてのデータを保持します。

    • 各要素のイベントリスナーは、インスタンスデータを操作するangularコントローラーの特定の機能をトリガーします

    • ディレクティブはコントローラーのインスタンスデータを監視し、それに応じてキャンバスサービスの助けを借りてキャンバスを更新します

コントローラーの継承については、次のアプローチが非常に役立つことがわかりました。 https://github.com/exratione/angularjs-controller-inheritance

これにより、コントローラーを動的に作成でき、インスタンスディレクティブを使用して、汎用イベント処理とともにキャンバス上の個々の更新を処理することもできました。

このアプローチは完全にAngularJS指向ではないかもしれないことを理解していますが、私たちにとってはうまく機能し、AngularJSとHTML5 Canvasの間の適切な量のやり取りを処理することができました。

42
Kapil Kaushik

もちろん、Angularで問題ありません。ただし、アプリの複雑さと必要なデータ同期の種類によっては、JSプロトタイプを使用してそれを処理することをお勧めします。代わりにディレクティブを使用します。

グローバルな描画コンテキストを作成し、さまざまなコンポーネントをJSオブジェクトに分割します。各オブジェクト内のセットアップ、ロジック、更新など（クラスのようなもの）を処理し、グローバルコンテキストに描画します。メインのdraw loopが必要です。これは基本的に、ゲームオブジェクトの状態を更新し、すべてを再描画するsetTimeOut関数です。

別のアプローチは、AngularとJSプロトタイプを組み合わせることです。これは素晴らしい例です。 https://github.com/IgorMinar/Memory-Game

編集：angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html でゲームを構築する別の例

8
winkerVSbecks