Работа с Canvas и AngularJS

Я беру на себя задачу перезаписать следующее флэш-приложение в HTML5:

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

Учитывая сложность приложения и моего R & D до сих пор, я определил AngularJS как предпочтительную структуру MVC для реализации. Приложение имеет различные части, такие как панели, меню, свойства, диаграммы и т.д., Все из которых, я считаю, можно легко реализовать в AngularJS.

Основная проблема заключается в том, что дизайн и взаимодействие компонентов (например, перетаскивание, перемещение, обработка проводов и т.д.) должны быть на основе Canvas, так как я смог экспортировать всю векторную графику из Flash с помощью инструментария CreateJS (http://www.adobe.com/in/products/flash/flash-to-html5.html) в библиотеку Canvas, а не в SVG.

Проблема в том, что нет четкого способа общения между "отдельными объектами внутри холста" и AngularJS. Я рассмотрел следующие примеры, но почти все они работают над объектом canvas, а не об обработке отдельных компонентов внутри Canvas:

AngularJS Связывание с WebGL/Canvas

Есть ли еще директива по рисованию холста для AngularJS?

Я как бы застрял здесь и не уверен, что делать. Поистине оцените некоторые комментарии:

  • Является ли AngularJS правильным выбором?

  • Должен ли я попытаться реализовать часть Canvas в другой библиотеке (например, Fabric.js, kinect.js, Easel.js) и интегрировать ее с Angular (что опять кажется слишком большой задачей на данный момент)?

  • Если ничего из вышеперечисленного, какую другую инфраструктуру я должен переключить, можно легко справиться с холстом, а также с другими функциями, такими как панели, меню, диаграммы и т.д.

Ответы

Ответ 1

Наконец нам удалось работать вместе с AngularJS и HTML5 Canvas. Ниже я расскажу, кратко, наши требования и подход, который мы выполнили для его достижения.

Требование было немного сложным, как мы хотели:

  • Обработка дескрипторов событий на отдельных элементах внутри холста и возможность динамического добавления этих элементов на основе данных в AngularJS

  • Храните данные для каждого отдельного элемента в AngularJS при использовании Canvas для отображения только данных.

  • Использовать наследование контроллера для специальной обработки данных в определенных случаях (например, все экземпляры должны быть перемещаемыми и перетаскиваемыми, но некоторым экземплярам может потребоваться мигать или показывать некоторые цветовые полосы и т.д.)

Чтобы обрабатывать операции над Canvas, мы разделили его на две части:

  • Работа с холстом

    Выполняет работу

    • инициализация холста

    • добавление или удаление любого элемента из холста

    • Обновление холста

  • Директива и контроллер экземпляра

    • контроллер angular хранит дескриптор для соответствующего "элемента canvas", а также всех связанных с ним данных.

    • слушатели событий на каждом элементе запускают определенные функции в контроллере angular, которые управляют данными экземпляра

    • директива отслеживает данные экземпляра в контроллере и соответственно обновляет холст с помощью службы холста

Для наследования контроллера мы обнаружили, что следующий подход весьма полезен: https://github.com/exratione/angularjs-controller-inheritance

Это помогло нам динамически создавать контроллеры, и с помощью директивы instance мы также могли обрабатывать отдельные обновления на холсте вместе с общей обработкой событий.

Я понимаю, что этот подход может быть не полностью ориентированным на AngularJS, но он отлично работает для нас, и мы смогли справиться с разумным количеством взаимодействия между AngularJS и Canvas HTML5.

Ответ 2

Конечно, вы можете сделать это с помощью Angular просто отлично. Однако, в зависимости от сложности вашего приложения и типа синхронизации данных, я бы рекомендовал использовать прототипы JS, чтобы справиться с этим. "angular способ" должен был бы использовать директивы вместо этого.

Создайте глобальный контекст чертежа, а затем разделите различные компоненты на объекты JS. Обращайтесь с установкой, логикой, обновлением и т.д. Внутри каждого объекта (вроде класса), а затем примените глобальный контекст. У вас должен быть главный draw loop, который по существу является функцией setTimeOut, которая обновляет состояния игрового объекта и перерисовывает все.

Альтернативный подход заключается в объединении прототипов Angular и JS. Это отличный пример: https://github.com/IgorMinar/Memory-Game

EDIT: еще один пример создания игр с Angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html