sirve - ¿Estado actual de las bibliotecas de lienzo de Javascript?
que es javascript y para que sirve (4)
He estado investigando sobre bibliotecas de lienzo HTML y me encontré con esta pregunta. ¿Cuál es el estado actual del arte en las bibliotecas y frameworks de JavaScript HTML canvas? eso se preguntó en 2010. La respuesta principal fue Fabric.js. Después de investigar un poco más, me encontré con http://www.html5canvastutorials.com/ que presenta tutoriales sobre KineticJs, que cuenta con múltiples lienzos para la velocidad. Un poco más de investigación más tarde reveló que las bibliotecas Canvas parecen estar por todas partes cuando se trata de velocidad y características. ¿Cuál es el estado actual de las bibliotecas y marcos de Canvas de JavaScript en la actualidad? ¿Uno ha salido en la cima?
EDITAR: Dado que las bibliotecas cambian constantemente y que mucha gente ha venido recientemente para recibir noticias e información sobre nuevas bibliotecas, cambié la pregunta para que fuera más atemporal.
Descargo de responsabilidad: soy el autor de Fabric.js .
Diría que Easel.js, Fabric.js y Paper.js están entre los más utilizados en este momento. Estoy juzgando por el número de observadores de Github para cada repositorio, el volumen de discusión en sus Grupos de Google y la frecuencia con la que escucho que se usan como bibliotecas de lienzos en Twitter.
Estos también son aquellos con documentación más o menos decente, ejemplos / demostraciones, grupos de discusión y pruebas unitarias (el estado de las pruebas en la mayoría de las otras bibliotecas de lienzos es bastante triste).
También estoy manteniendo esta tabla de comparación de varias bibliotecas de lienzos , donde puede ver qué tan recientemente se actualizó la biblioteca, su tamaño, soporte para IE <9 o node.js, y más.
Para lectores recientes, a partir de enero de 2013, evalué:
- Cinético
- Tela
- Papel
- Caballete
Por "evaluado", hice más que solo leer los documentos; Creé una aplicación prototipo.
Empecé con Fabric porque parecía tener la comunidad más grande y pensé que sería mi solución. Pero renuncié a Fabric por los siguientes motivos:
- Incoherencias de API extrañas e indocumentadas que consumieron mucho tiempo innecesariamente.
- soporte de eventos de puntero inconsistente. Específicamente, Fabric no considera que un "Camino" sea un verdadero objeto de forma que sea seleccionable y observable. Esto no satisfizo mis necesidades ya que las Rutas interactivas son un requisito importante de mi aplicación.
- detrás de escenas, adiciones de traducciones al Canvas para colocar objetos. Para mí, Fabric intenta ser demasiado inteligente en este aspecto sin ser claro para el desarrollador de lo que está haciendo.
- opinión demasiado fuerte sobre cómo mover, cambiar el tamaño y rotar la interactividad funciona. En muchos sentidos, es genial tener esta funcionalidad incorporada en el marco pero, en mi caso, no estaba de acuerdo con la forma en que se implementó, lo que significaba esencialmente tener que volver a implementarlo de todos modos.
- documentación dispersa: muchos de los casos en que la documentación de un método tiene la forma: "setX (Y) - set''s the X to Y" :-)
Eché un vistazo a Paper y no llegué demasiado lejos. Parecía demasiado obtuso para mí y también se encuentra entre taburetes IMO: es una biblioteca de visualización demasiado grande como para ser un simple modelo de objetos para Canvas, pero no es suficiente una biblioteca de visualización para competir con D3. Además, la documentación nuevamente no fue particularmente accesible.
Creo que Easel probablemente tiene mucho sentido si tienes un fondo Flash / ActionScript pero yo no. Además, parecía demasiado centrado en el juego para mis requisitos. El clavo en el ataúd era nuevamente documentación, no lo suficiente y presentado en un formato no estándar.
Entonces, terminé yendo con Kinetic porque:
- tutoriales y ejemplos muy ricos y claros
- Las funciones de la API hacen lo que se les llama y son en gran parte imaginables: una productividad más rápida, una curva de aprendizaje más superficial
- es bastante claro sobre lo que hace y lo que no: no es tan rico como algunos de los otros, pero eso es un beneficio; hace menos cosas pero las hace mejor
- Los caminos son Shapes ciudadanos de primera clase, como cualquier otra forma, que era esencial para mis requisitos.
Kinetic no es perfecto de ninguna manera y ha habido algunas veces en las que he tenido que sumergirme profundamente en el código fuente para descubrir qué está sucediendo bajo las sábanas. Además, echo de menos el análisis SVG y la salida de Fabric.
Recomiendo encarecidamente pixijs. Es una biblioteca de lienzo de alto rendimiento.
Pixi.js es un renderizador 2D de webGL con un respaldo de lienzo continuo que le permite funcionar en todos los navegadores modernos, tanto de escritorio como de dispositivos móviles.
EDITAR: KineticJS ya no se mantiene activamente.
Descargo de responsabilidad: Creé KineticJS
KineticJS en realidad está funcionando bastante bien. Puede encontrar el código fuente en Github , donde está protagonizado por 2180 personas en este momento.
Puede manejar miles de formas concurrentes:
Prueba de esfuerzo de 10.000 drag and drop: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
10,000 formas con información sobre herramientas: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/
Tiene muy buen soporte para eventos, incluidos eventos móviles, y tiene un conjunto bastante sólido de pruebas de 100 unidades, por lo que la base de códigos se siente bastante sólida.
kangax: PD increíble trabajo con fabric.js! Además de KineticJS (por supuesto), mis otras dos bibliotecas favoritas son tela y papel.