Praca z Canvas i AngularJS

Podejmuję się zadania ponownego napisania następującej aplikacji flash w HTML5:

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

Biorąc pod uwagę złożoność aplikacji i moje badania i rozwój do tej pory, zidentyfikowałem AngularJS jako preferowane ramy MVC dla wdrożenia. Aplikacja ma różne części, takie jak panele, menu, Właściwości, wykresy itp. wszystko, co moim zdaniem można łatwo zaimplementować w AngularJS.

Kluczowym problemem jest jednak to, że konstrukcja komponentu i interakcja (takie rzeczy jak przeciąganie/upuszczanie, przenoszenie, obsługa drutu itp.) muszą być oparte na płótnie, ponieważ udało mi się wyeksportować całą grafikę wektorową z Flasha za pomocą zestawu narzędzi CreateJS (http://www.adobe.com/in/products/flash/flash-to-html5.html ) do biblioteki Canvas, a nie do SVG.

Problem polega na tym, że nie ma jasnego sposobu komunikowania się między "indywidualnymi obiektami wewnątrz płótna" a AngularJS. Przyjrzałem się poniższym przykładom, ale prawie wszystkie z nich działają na obiekt canvas, a nie o obsłudze poszczególnych komponentów wewnątrz Canvas:

AngularJS Binding to WebGL / Canvas

Czy istnieje już dyrektywa rysunkowa dla AngularJS?

Utknąłem tu i nie wiem, co robić. Byłabym wdzięczna za kilka Komentarzy:

  • Czy AngularJS jest właściwym wyborem?

  • Czy powinienem spróbować zaimplementować część Canvas w innej bibliotece(np.js, kinect.js, Sztalugi.js) i zintegrować go z Angular (co znowu wydaje się zbyt dużym zadaniem na razie)?

  • Jeśli żaden z powyższych, jaki inny framework powinienem przełączyć na który może łatwo obsługiwać canvas, a także inne funkcje, takie jak panele, menu, wykresy itp. z łatwością?

Author: Community, 2013-11-07
Source

2 answers

W końcu udało nam się współpracować z AngularJS i HTML5 Canvas razem. Poniżej krótko podzielę się naszymi wymaganiami i podejściem, które zastosowaliśmy, aby je osiągnąć.

Wymaganie było trochę trudne, jak chcieliśmy:

  1. Obsługa uchwytów zdarzeń na poszczególnych elementach wewnątrz obszaru roboczego i możliwość dynamicznego dodawania tych elementów na podstawie danych w AngularJS

  2. Przechowuj dane dla każdego pojedynczego elementu w AngularJS, używając Canvas tylko dla wyświetlanie danych.

  3. Użyj dziedziczenia kontrolera do specjalnej obsługi danych w pewnych przypadkach (np. wszystkie instancje powinny być ruchome i przeciągalne, ale niektóre instancje mogą wymagać mrugnięcia lub pokazania pewnych pasm kolorów itp.)

Aby obsłużyć operacje na płótnie, podzieliliśmy je na dwie części:

  1. Canvas service

    Wykonuje zadanie

    • Inicjalizacja płótna

    • Dodawanie lub usuwanie dowolnego elementu z płótna

    • Odświeżanie płótna

  2. Przykładowa dyrektywa i kontroler

    • Kontroler kątowy utrzymuje uchwyt dla odpowiedniego "elementu canvas", a także wszystkich danych, które są z nim związane.

    • Detektory zdarzeń na każdym elemencie uruchamiają określone funkcje w kontrolerze kątowym, które manipulują danymi instancji

    • Dyrektywa nadzoruje dane instancji w kontrolerze, i odpowiednio aktualizuje płótno za pomocą usługi canvas

Dla dziedziczenia kontrolera, uznaliśmy następujące podejście za całkiem przydatne: https://github.com/exratione/angularjs-controller-inheritance

Pomogło nam to dynamicznie tworzyć Kontrolery, a przy pomocy dyrektywy instancyjnej mogliśmy również obsługiwać pojedyncze aktualizacje w kanwie wraz z ogólną obsługą zdarzeń.

Rozumiem, że takie podejście może nie być całkowicie zorientowane na AngularJS, ale działało dobrze dla nas i byliśmy w stanie obsłużyć rozsądną ilość interakcji między AngularJS i HTML5 Canvas.

 42
Author: Kapil Kaushik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-09 15:59:45

Pewnie, że możesz to zrobić z Angular. Jednak w zależności od złożoności aplikacji i rodzaju synchronizacji danych, których potrzebujesz, zalecałbym użycie prototypów JS do obsługi tego. "Kanciastym sposobem" byłoby użycie dyrektyw.

Utwórz globalny kontekst rysowania, a następnie podziel różne komponenty na obiekty JS. Obsługuj konfigurację, logikę, aktualizację itp. wewnątrz każdego obiektu (coś w rodzaju klasy), a następnie rysuj do globalnego kontekstu. Powinieneś mieć główna draw loop, która jest zasadniczo funkcją setTimeOut, która aktualizuje Stany obiektów gry i przerysowuje wszystko.

Alternatywnym podejściem jest połączenie prototypów Angular i JS. To jest świetny przykład: https://github.com/IgorMinar/Memory-Game

EDIT: kolejny przykład budowania gier z angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html

 8
Author: winkerVSbecks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-28 15:25:03