2009-09-17 9 views
14

¡Encontré una biblioteca de vectores en Internet que incluso funciona con IE6!¿Qué es mejor y por qué? RaphaelJS o HTML5 Canvas?

http://raphaeljs.com/index.html

Es increíble.

Ahora mi pregunta es mejor que el próximo HTML5 <lienzo>? La única razón por la que pregunto es que podrían pasar años antes de que Microsoft implemente un lienzo < > que no requiera un complemento para que se ejecute.

Y será aún más tiempo hasta que todos los usuarios de IE a través de Internet a deshacerse de sus viejos navegadores de manera que incluso podemos justificar el uso del canvas de HTML5 < >.

Estoy a punto de apegarme a los estándares, pero este solo tardará demasiado, gracias al lento desarrollo de MS de su navegador.

¿Pensamientos?

+0

No estás involucrado de alguna manera en el proyecto, ¿o sí? Esto suena como un Rah! Rah! publicar, no una pregunta. –

+0

@ T.J. No, acabo de encontrarlo en Internet. Y he estado muy frustrado con la espera de IE para ponerse al día con todos los otros navegadores. – leeand00

Respuesta

20

Raphael es una biblioteca de gráficos vectoriales, hecha usando SVG, mientras que el lienzo HTML5 es gráficos de mapa de bits.

Si quieres hacer gráficos vectoriales, creo que ir con Raphael es probablemente una buena opción sobre el lienzo "solo". Como dices, el lienzo no funciona con IE y probablemente pase un tiempo antes de que sea compatible de forma nativa. Si Raphael hace lo que necesita, no hay una razón particular para no usarlo.

Tenga en cuenta que también hay otras bibliotecas para esto: Excanvas, que emula canvas para IE usando VML (hasta donde yo sé), y algunos otros que hacen lo mismo con Silverlight y Flash pero olvidé sus nombres.

También hay Dojo, que tiene un componente para abstraer el uso del lienzo detrás de una interfaz fácil de usar, que también es compatible con IE.

Tener un lienzo nativo en todos los navegadores no hará que las bibliotecas se vuelvan obsoletas, ya que las bibliotecas suelen abstraer algunas de las complejidades del lienzo, facilitando el uso.

+5

El rendimiento es la gran diferencia. SVG reduce la velocidad mucho si hay muchos nodos para dibujar. Este es un resultado inherente de cómo funciona SVG. El rendimiento del Canvas de HTML5 está determinado principalmente por la cantidad total de píxeles que necesitan rediseño (ancho x alto). – Jacco

+0

@Jacco - gran punto: las cosas realmente comienzan a tartamudear con SVG si intentas animar muchas cosas (por ejemplo, un campo estelar) - Canvas puede manejarlo mucho mejor. –

5

SVGWeb (http://code.google.com/p/svgweb/) por Google es lo que quiere. Hace IE compatible con SVG, que es el estándar, y que todos los otros navegadores mainstream ya admiten. En otras palabras, como dice google, "Al usar la biblioteca más la compatibilidad SVG nativa, puede apuntar instantáneamente ~ 95% de la base web instalada existente".

5

Y puede usar http://code.google.com/p/explorercanvas/ que implementa HTML5 Canvas Standard en IE. Todo lo que hacemos es añadir:

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
</head> 

La diferencia entre la lona y SVG se explica como sigue:

SVG y el lienzo no son realmente tecnologías intercambiables. SVG es un tipo de gráficos de modo retenido donde todo se extrae de un modelo abstracto más bien (el documento SVG). Canvas por otro lado es un tipo de gráficos de modo inmediato , donde no es un modelo y el cliente (JavaScript) debe ocuparse de redibujar , animaciones, etc.

4

La respuesta depende de lo que necesita:

  • si es necesario agregar controladores de eventos para los objetos gráficos: es necesario utilizar SVG. Else Canvas.

  • si no se necesitan eventos es importante actuación: Si sí, entonces lienzo 5.

Tenga en cuenta que IE 9 es compatible con la lona y ofrece más soporte HTML 5 en comparación con otros navegadores!

+1

Los eventos se pueden manejar fácilmente en HTML5 Canvas. – Jacco

+0

El lienzo en sí responderá a los eventos de clic; Sin embargo, necesitará realizar un seguimiento manual de las ubicaciones de los objetos. Bibliotecas como [KineticJS] (http://www.kineticjs.com/) ayudan con esto, sin embargo, y hacen que Canvas sea tan fácil de usar como Raphael. – btown

0

estaba buscando "raphael vs canvas" la publicación aquí tiene 5 años. Tiene algo chaneged desde entonces? Es raphael obsolet?