not - nginit angularjs

Trabajando con Canvas y AngularJS

Question

Estoy asumiendo una tarea para volver a escribir la siguiente aplicación flash en HTML5:

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

Dada la complejidad de la aplicación y mi I + D hasta ahora, he identificado AngularJS como el marco MVC preferido para la implementación. La aplicación tiene varias partes, como paneles, menús, propiedades, gráficos, etc., todos los cuales creo que se pueden implementar fácilmente en AngularJS.

El problema clave, sin embargo, es que el diseño e interacción de los componentes (cosas como arrastrar / soltar, mover, manipular cables, etc.) deben basarse en Canvas, ya que he podido exportar todos los gráficos vectoriales desde Flash usando el kit de herramientas CreateJS ( http://www.adobe.com/in/products/flash/flash-to-html5.html ) en una biblioteca de Canvas y no a un SVG.

El problema es que no hay una forma clara de comunicarse entre los "objetos individuales dentro de un lienzo" y AngularJS. He analizado los siguientes ejemplos, pero casi todos trabajan en el objeto canvas, y no sobre el manejo de componentes individuales dentro de Canvas:

AngularJS Enlace a WebGL / Canvas

¿Ya existe una directiva de dibujo de lienzo para AngularJS?

Estoy algo atrapado aquí, y no estoy seguro de qué hacer. Realmente agradecería algunos comentarios sobre:

• Si AngularJS es la elección correcta?

• ¿Debo intentar implementar la parte Canvas en otra biblioteca (como Fabric.js, kinect.js, Easel.js) e integrarla con Angular (lo que de nuevo parece una tarea demasiado grande por ahora)?

• Si ninguno de los anteriores, ¿a qué otra estructura debo cambiar para que pueda manejar fácilmente canvas y otras funcionalidades como paneles, menús, tablas, etc. con facilidad?

Answer 1

Claro que podrías hacer eso con Angular bien. Sin embargo, dependiendo de la complejidad de su aplicación y del tipo de sincronización de datos que necesite, recomendaría utilizar prototipos JS para manejar eso. La "forma angular" sería usar directivas en su lugar.

Cree un contexto de dibujo global y luego divida los diversos componentes en objetos JS. Maneje la configuración, lógica, actualización, etc. dentro de cada objeto (como una clase) y luego dibuje en el contexto global. Debería tener un draw loop principal que es esencialmente una función setTimeOut que actualiza los estados del objeto de juego y vuelve a dibujar todo.

Un enfoque alternativo es combinar prototipos Angular y JS. Este es un gran ejemplo: https://github.com/IgorMinar/Memory-Game

EDITAR: otro ejemplo de construcción de juegos con angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html

Answer 2

Finalmente logramos trabajar con AngularJS y HTML5 Canvas juntos. A continuación, compartiré, brevemente, nuestros requisitos y el enfoque que seguimos para lograrlo.

El requisito era un poco complicado ya que queríamos:

1. Maneje identificadores de eventos en elementos individuales dentro del lienzo y sea capaz de agregar estos elementos de forma dinámica en función de los datos en AngularJS

2. Guarde datos para cada elemento individual en AngularJS mientras usa Canvas para mostrar solo los datos.

3. Utilice la herencia del controlador para el manejo especial de datos en ciertos casos (por ejemplo, todas las instancias deben ser móviles y arrastrables, pero algunas instancias pueden necesitar parpadear o mostrar algunas bandas de color, etc.)

Para manejar las operaciones en Canvas, lo dividimos en dos partes:

1. Servicio de lienzo

   Hace el trabajo de

   • inicializando el lienzo

   • agregar o eliminar cualquier elemento del lienzo

   • refrescando el lienzo

2. Directiva de instancia y controlador

   • el controlador angular mantiene el identificador del "elemento canvas" correspondiente, y también todos los datos asociados a él.

   • los detectores de eventos en cada elemento activan funciones específicas en el controlador angular que manipulan los datos de la instancia

   • la directiva observa los datos de la instancia en el controlador y actualiza el lienzo de forma correspondiente con la ayuda del servicio de lienzo

Para la herencia del controlador, encontramos el siguiente enfoque bastante útil: https://github.com/exratione/angularjs-controller-inheritance

Esto nos ayudó a crear controladores dinámicamente, y con la ayuda de la directiva de instancia, también pudimos manejar actualizaciones individuales en el lienzo junto con el manejo genérico de eventos.

Entiendo que este enfoque puede no estar completamente orientado a AngularJS, pero funcionó bien para nosotros, y pudimos manejar una cantidad razonable de interacción entre AngularJS y HTML5 Canvas.