¿Estado actual de las bibliotecas de lienzo de JavaScript? [cerrado]


90

He estado investigando sobre bibliotecas de lienzo HTML y me encontré con esta pregunta. ¿Cuál es el estado actual de las bibliotecas y marcos de JavaScript de lienzo HTML? que se preguntó en 2010. La respuesta principal fue Fabric.js. Después de investigar un poco más, encontré http://www.html5canvastutorials.com/ que presenta tutoriales sobre KineticJs, que se jacta de tener 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 JavaScript Canvas en la actualidad? ¿Ha salido uno en la cima?

EDITAR: Dado que las bibliotecas cambian constantemente y muchas personas han venido recientemente aquí para obtener noticias e información sobre nuevas bibliotecas, cambié la pregunta para que sea más atemporal.


2
absolutamente. Creo que las opciones se ven así: 2d-context -> KineticJS, fabric.js, paper.js o easel.js. 3d-context (webgl) -> Three.js
Eric Rowell

1
Puede consultar el enlace de kangax a la comparación de bibliotecas de lienzo.
Volviendo a publicar

4
Me sorprende que esta pregunta aún no se haya cerrado, ya que casi todo aquí generalmente se cierra. Quiero responder, pero estoy demasiado asustado (léase "aterrorizado"), ya que podría considerarse fuera de tema. Tal vez si reformulara la pregunta como "¿qué son las similitudes / compensaciones?", Podría agregar mis dos centavos (lea "respuesta")
Puk

4
Siento lo mismo que @puk. Además, creo que la brecha semántica entre lo que es esencialmente "abierto" y lo que está marcado como "no constructivo" es divertida. Se traduce a grandes rasgos en decir que las preguntas para las que no es posible una única respuesta irreductible no merecen ser consideradas en el repositorio de conocimientos de programación más popular y completo del mundo. Entiendo que no se ajustan a una buena 'Q + A', pero ¿por qué no marcarlos como 'altamente subjetivos', limitar los puntos de repetición y mantenerlos abiertos ... algo?
Mark Fox

1
Solo estoy sopesando para que yo también esté realmente irritado con el cierre constante de preguntas útiles solo porque son subjetivas. ¿¡Y qué!? Es algo muy útil.
Iain Duncan

Respuestas:


80

Descargo de responsabilidad: soy el autor de Fabric.js .

Diría que Easel.js, Fabric.js y Paper.js se encuentran entre los más utilizados en este momento. A juzgar por la cantidad 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 lienzo en Twitter.

Estos también son los que tienen documentación, ejemplos / demostraciones, grupos de discusión y pruebas unitarias más o menos decentes (el estado de las pruebas en la mayoría de las otras bibliotecas de lienzo es bastante triste).

También mantengo esta tabla de comparación de varias bibliotecas de lienzo , donde puede ver qué tan recientemente se actualizó la biblioteca, su tamaño, soporte para IE <9 o node.js, y más.


su comparación proporciona mucha información, pero es editable públicamente y debería restringirse, porque algunos otros usuarios los editarán incorrectamente. Necesito ayuda si kineticjs no admite nodjs. y puede dar un ejemplo como el programa de pintura de Windows (dibujando el círculo de objetos en vivo con su tela)
Thirumalai murugan

no es editable públicamente
Kangax

1
¡Qué suerte haber encontrado esta publicación! Solía ​​trabajar con Kinetic, pero todavía no está maduro. Luego probé con Easel, pero es demasiado pesado. Finalmente me mudé a Fabric, ¡y es genial!
MeLight

@kangax Perdón por la falta de comprensión, ¿puedes darme un ejemplo como el programa de pintura de Windows (dibujando el círculo de objetos en vivo con tu tela)?
Thirumalai murugan

@Thirumalaimurugan aquí tienes: jsfiddle.net/fabricjs/nXmTC/1
kangax

66

EDITAR: KineticJS ya no se mantiene activamente.

Descargo de responsabilidad: creé KineticJS

KineticJS está funcionando bastante bien. Puedes encontrar el código fuente en Github , donde actualmente está protagonizado por 2180 personas.

Puede manejar miles de formas concurrentes:

10,000 prueba de esfuerzo de arrastrar y soltar: 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 de eventos, incluidos los eventos móviles, y tiene un conjunto bastante sólido de cientos de pruebas unitarias, por lo que la base del código se siente bastante sólida.

kangax: PD ¡trabajo increíble con fabric.js! Aparte de KineticJS (por supuesto), mis otras dos bibliotecas favoritas son tela y papel.


7
¡Solo mire las demostraciones y el rendimiento se ve bastante impresionante! También me alegra saber que tienes pruebas unitarias. Veo que permite la creación de múltiples capas. Eso es bueno. En la tela, optimizamos de la misma manera, pero solo tenemos 2 capas, una para la selección, otra para dibujar, e internamente (los usuarios no pueden crear más). De alguna manera me perdí Kinetic al crear el cuadro de comparación de bibliotecas. Deberíamos arreglar eso :)
Kangax

6
actualización: KineticJS ahora está en github: github.com/ericdrowell/KineticJS
Eric Rowell

7
¿Cómo se compara KineticJS con EaselJS? ¿Cuándo debería uno usar qué?
geeky_monster

1
Me gustaría señalar que KineticJS también admite vectores SVG a través de la forma Kinetic.Path () html5canvastutorials.com/kineticjs/…
Eric Rowell

2
@EricRowell Mate Me encanta KineticJS, su velocidad, su unión con GSAP, pero lo que me hace girar la cabeza es que hay una manera de transformar libremente los objetos de KineticJS como en FabricJS? Aquí está la referencia del enlace a lo que estoy tratando de decir: fabricjs.com/customization No quiero usar FabricJs porque es realmente lento y su bajo rendimiento es evidente en varias pruebas unitarias. Tengo muchas ganas de encontrar una manera de poder transformar libremente objetos en KineticJS, ya que haría la vida mucho más fácil. Gracias, Praney
praneybehl

62

Para los lectores recientes, a enero de 2013, evalué:

  • Cinético
  • Tela
  • Papel
  • Caballete

Con "evaluado", hice algo más que 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 las siguientes razones:

  • incoherencias de API extrañas e indocumentadas que consumieron gran parte de mi tiempo innecesariamente.
  • soporte de evento de puntero inconsistente. Específicamente, Fabric no considera que un "Camino" sea un objeto de forma real que sea seleccionable y observable. Esto no satisfizo mis necesidades ya que las rutas interactivas son un requisito importante de mi aplicación.
  • entre bastidores, adiciones de traducciones al lienzo para colocar objetos. Para mí, Fabric intenta ser demasiado inteligente en este sentido sin dejar claro al desarrollador lo que está haciendo.
  • Opinión demasiado fuerte sobre cómo funciona la interactividad mover, redimensionar y rotar. En muchos sentidos, es genial tener esta funcionalidad integrada 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 yo mismo de todos modos.
  • documentación escasa - muchos de los casos en los que la documentación de un método tiene la forma: "setX (Y) - establece la X en Y" :-)

Eché un vistazo a Paper y no llegué demasiado lejos. Me pareció demasiado obtuso y también se encuentra entre demasiado taburetes en mi opinión: es una biblioteca de visualización demasiado grande para ser un modelo de objeto simple para Canvas, pero no es una biblioteca de visualización suficiente para competir con D3. Además, la documentación nuevamente no era particularmente accesible.

Creo que Easel probablemente tenga mucho sentido si tienes experiencia en Flash / ActionScript, pero yo no. Además, parecía demasiado centrado en el juego para mis requisitos. El clavo en el ataúd fue nuevamente documentación, no suficiente y presentada en un formato no estándar.

Entonces, terminé eligiendo Kinetic porque:

  • tutoriales y ejemplos realmente ricos y claros
  • Las funciones de API hacen lo que se les llama y se pueden adivinar en gran medida: productividad más rápida, curva de aprendizaje menos profunda
  • tiene razonablemente claro 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 Formas ciudadanas de primera clase, como cualquier otra Forma, lo cual era esencial para mis requisitos.

Kinetic no es perfecto de ninguna manera y ha habido algunas ocasiones en las que tuve que profundizar en el código fuente para averiguar qué está pasando realmente bajo las sábanas. Además, extraño el análisis y la salida de SVG de Fabric.


1
Gracias por esta respuesta, me ahorró mucho tiempo. Voy a ir con Kinetic y espero que descubras lo que ya dijiste.
Bashevis

He realizado una prueba de usuario no científica de las demostraciones de arrastrar y soltar proporcionadas para las bibliotecas anteriores en iPad3 y Samsung Galaxy Tab2. KineticJS resultó ser un claro ganador también aquí, siendo más receptivo y más exacto en su posicionamiento táctil.
Per Quested Aronsson

1
Estoy evaluando ambos, y por el momento, sinceramente, fabricjs parece estar más completo y bien documentado.
Albanx

9
Jeremy, me encantaría saber más sobre las inconsistencias de API en Fabric. Intento hacerlo lo más intuitivo posible, así que si algo sigue siendo extraño, definitivamente querría encargarme de ello. ¿Puede presentar un ticket o mencionarlo aquí? Los documentos han ido mejorando desde enero, aunque todavía no son tan buenos como me gustaría que fueran. Fuerte opinión de la interactividad. Supongo que puedes decir eso, aunque hay muchos ajustes que puedes hacer. ¿Qué querías diferente exactamente? Finalmente, eventos de puntero : no estoy seguro de lo que quiere decir. El camino es ciertamente una forma real: fabricjs.com/quadratic-curve
kangax

23

Recomiendo encarecidamente pixijs. Es una biblioteca de lienzos de alto rendimiento.

Pixi.js es un renderizador webGL 2D con un respaldo de lienzo sin interrupciones que le permite funcionar en todos los navegadores modernos, tanto de escritorio como móviles.

http://www.goodboydigital.com/pixi-js-is-out/


3
En julio de 2014, esta parece ser la mejor biblioteca de lienzos que existe. Con 4k personas lo protagonizaron en Github y es utilizado por grandes empresas y agencias. pixijs.com/projects como Google.
Vennsoh
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.