39

HTML5 で次のフラッシュ アプリを書き直す作業を行っています。

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

これまでのアプリと私の研究開発の複雑さを考慮して、AngularJS を実装に適した MVC フレームワークとして特定しました。このアプリには、パネル、メニュー、プロパティ、チャートなどのさまざまなパーツがあり、それらはすべて AngularJS で簡単に実装できると思います。

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

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

WebGL / Canvas への AngularJS バインディング

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

ここで立ち往生していて、どうすればよいかわかりません。以下に関するコメントをいただければ幸いです。

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

  • Canvas 部分を別のライブラリ (Fabric.js、kinect.js、Easel.js など) に実装して、それを Angular と統合する必要がありますか?

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

4

2 に答える 2

44

最終的に、AngularJS と HTML5 Canvas を連携させることができました。以下では、私たちの要件と、それを達成するために採用したアプローチについて簡単に説明します。

私たちが望んでいたので、要件は少しトリッキーでした:

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

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

  3. 特定の場合にデータを特別に処理するためにコントローラーの継承を使用します (たとえば、すべてのインスタンスを移動およびドラッグ可能にする必要がありますが、一部のインスタンスは点滅したり、いくつかのカラー バンドを表示したりする必要がある場合など)。

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

  1. キャンバス サービス

    それはの仕事をします

    • キャンバスの初期化

    • キャンバスからの要素の追加または削除

    • キャンバスのリフレッシュ

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

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

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

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

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

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

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

于 2014-01-10T06:02:16.280 に答える
9

確かに、Angular で問題なく実行できます。ただし、アプリの複雑さと必要なデータ同期の種類によっては、JS プロトタイプを使用して処理することをお勧めします。「角度のある方法」は、代わ​​りにディレクティブを使用することです。

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

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

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

于 2013-11-28T15:04:52.947 に答える