Acabo de iniciar un proyecto utilizando el Canvas. Pero una de las cosas que necesito es hacer un seguimiento de los cuadros móviles que se pueden cliquear como en este ejemplo: http://raphaeljs.com/graffle.html, así que me pregunto si Raphael-js + SVG sería mejor.¿Cuáles son los pros y los contras de HTML5 Canvas vs. SVG + Raphael.js?
¿Cuál usarías? ¿Y por qué?
Esta respuesta se ha copiado de mi respuesta a otra pregunta. Pero el OP cambió la pregunta y, por lo tanto, esta respuesta se volvió menos relevante. En mi humilde opinión, es más relevante para esta pregunta así que aquí va:
Piense en la diferencia entre el lienzo y SVG como la diferencia entr Photoshop e Illustrator (o Gimp e Inkscape para la gente que OSS). Uno trata con bitmaps y el otro arte vectorial.
Con lienzo, ya que está dibujando en mapa de bits, puede manchar, desenfocar, grabar, esquivar las imágenes con facilidad. Pero dado que es un mapa de bits, no es fácil trazar una línea y luego decidir cambiar la posición de la línea. Debe eliminar la línea anterior y luego dibujar una nueva línea.
Con svg, ya que está dibujando vectores, puede mover, escalar, rotar, cambiar de posición y voltear sus dibujos fácilmente. Pero dado que se trata de vectores, no es posible difuminar fácilmente los bordes de acuerdo con el grosor de la línea ni fusionar un círculo rojo en un cuadrado azul. Debe simular la borrosidad dibujando polígonos intermedios entre los objetos.
A veces su caso de uso se superpone. Por ejemplo, muchas personas usan lienzos para hacer dibujos de líneas simples y realizar un seguimiento de los objetos como estructuras de datos en javascript. Pero realmente, ambos sirven para diferentes propósitos. Si intentas implementar un dibujo vectorial de propósito general en javascript puro en el lienzo, dudo que seas más rápido que usar svg, que probablemente se implemente en C.
Morphing svg paths es bastante posible de hacer, por ejemplo, círculo -> cuadrado azul (aunque tendrás que representar las formas como elementos de ruta). Tenga en cuenta que svg también tiene filtros, agregar un desenfoque no es mucho más difícil que agregar un atributo y una definición de filtro en el archivo svg. –
@Erik: no estoy hablando de morphing.Estoy hablando de formas que se mezclan entre sí por desenfoque. Por ejemplo, una imagen (no una animación, una imagen estática) de un círculo rojo que se mezcla con un cuadrado azul tendrá el color púrpura en el punto en que se mezclan y los bordes se difuminan orgánicamente entre sí. Esto es simple en Photoshop y en la herramienta de borrones, pero es más difícil de hacer en Illustrator. – slebetman
@Erik: Además, es muy difícil cambiar el grado de desenfoque dependiendo del grosor de la línea simplemente usando filtros. Puede ser posible usando múltiples filtros, pero ciertamente no es trivial. – slebetman
Un par de cosas para decidir: ¿quieres que tus cosas trabajar en navegadores móviles? SVG (Raphael) no va a funcionar en Android (no sé nada de iphone). Por el contrario, si quieres algo que funcione con las versiones anteriores de Internet Explorer, Canvas puede no funcionar (no estoy seguro si ExCanvas admite IE6), pero SVG lo hace hasta cierto punto (Raphael admite IE6).
Además, se acaba haciendo animaciones/dibujo, o haces una aplicación completo soplado que podrían necesitar cosas como botones, barras de desplazamiento, contenedores de tabulación, listas, rejillas, etc.
Si va a crear una completa aplicación y desea que funcione en material móvil también, debes revisar el kit de herramientas dojo, dojox.gfx específica y otras librerías gráficas Dojox: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx es una biblioteca de gráficos vectoriales que soporta varios backends: lona , SVG, incluso Silverlight. He aquí un artículo comparándolo con Raphael: http://www.lrbabe.com/?p=217
salida también cake.js para una biblioteca de escenario gráfico independiente para el lienzo: http://code.google.com/p/cakejs/ Y también echa un vistazo processingjs.
Ah ... eso es muy útil saber: Android no es compatible con SVG/Raphael. – interstar
ExCanvas es compatible con IE6, pero ten cuidado, no cubre todas las funcionalidades de Canvas. Android será compatible con SVG en la versión futura. iPhone/iPad admite SVG IE no es compatible con SVG hasta la versión 9. –
También el artículo que señala tiene más de un año de antigüedad y, por lo tanto, está desactualizado. –
RaphaelJS no es * solo * SVG, y por lo tanto funcionará en navegadores (es decir, IE) que no tienen Canvas (aunque hay un emulador Canvas para IE). – Ken