javascript - html2 - screenshot jquery
jQuery SVG vs. Raphael (14)
Como principiante de Javascript, encontré las muestras de Rapahel no tan fáciles, recomiendo http://cancerbero.mbarreneche.com/raphaeltut , que es un tutorial real paso a paso.
Estoy trabajando en una interfaz interactiva usando SVG y JavaScript / jQuery, y estoy tratando de decidir entre Raphael y jQuery SVG . Me gustaría saber
- ¿Qué son las compensaciones entre los dos
- Donde el impulso de desarrollo parece estar.
No necesito el soporte VML / IE en Raphael, o las habilidades de trazado de jQuery SVG. Estoy interesado principalmente en la forma más elegante de crear, animar y manipular elementos individuales en un lienzo SVG.
Creo que no es totalmente ajeno, pero ¿consideraste el lienzo? Algo así como Process JS puede hacerlo más simple.
Oh Raphael ha avanzado significativamente desde junio. Hay una nueva biblioteca de gráficos que puede funcionar con ella y son muy llamativas. Raphael también admite la sintaxis de ruta SVG completa y está incorporando métodos de ruta realmente avanzados. Venga a ver 1.2.8+ en mi sitio (Shameless plug) y luego vaya al sitio de Dmitry desde allí. http://www.irunmywebsite.com/raphael/raphaelsource.html
Otra biblioteca de svg javascript que podría querer ver es d3.js. http://d3js.org/
Para aquellos que no se preocupan por IE6 / IE7, el mismo tipo que escribió Raphael construyó un motor svg específicamente para los navegadores modernos: Snap.svg ... tienen un sitio realmente bueno con buena documentación: SnapSVG
snap.svg no podría ser más fácil de usar de inmediato y puede manipular / actualizar los SVG existentes o generar nuevos. Puedes leer esto en el snap.io acerca de la página, pero aquí tienes un resumen rápido:
Contras
- Para utilizar las funciones de snap, debe renunciar a la compatibilidad con navegadores más antiguos. Raphael es compatible con navegadores como IE6 / IE7; las funciones de snap solo son compatibles con IE9 y superiores, Safari, Chrome, Firefox y Opera.
Pros
Implementa todas las funciones de SVG como enmascaramiento, recorte, patrones, gradientes completos, grupos y más.
Capacidad para trabajar con SVG existentes: el contenido no tiene que generarse con Snap para que funcione con Snap, lo que le permite crear el contenido con cualquier herramienta de diseño común.
Soporte completo de animación usando una API de JavaScript sencilla y fácil de implementar
Funciona con cadenas de SVG (por ejemplo, archivos SVG cargados a través de Ajax) sin tener que renderizarlos primero, de manera similar a un contenedor de recursos o una hoja de sprite.
Échale un vistazo si estás interesado: SnapSVG
Para la posteridad, me gustaría señalar que terminé eligiendo Raphael, debido a la API limpia y al soporte "gratuito" de IE, y también porque el desarrollo activo parece prometedor (el soporte de eventos se agregó en 0.7, por ejemplo). Sin embargo, dejaré la pregunta sin contestar, y todavía me interesaría escuchar las experiencias de otros usuarios utilizando las bibliotecas Javascript + SVG.
Prefiero usar RaphaelJS porque tiene grandes habilidades en varios navegadores. Sin embargo, algunos efectos SVG y VML no se pueden lograr con RaphaelJS (gradientes complejos ...).
Google también ha desarrollado una biblioteca propia para habilitar el soporte SVG en IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Raphael es definitivamente más fácil de configurar y ponerse en marcha, pero tenga en cuenta que hay formas de expresar cosas en SVG que no son posibles en Raphael. Como se señaló anteriormente, no hay "grupos". Esto implica que no puede implementar capas de Transfomaciones de coordenadas. En cambio, solo hay una coordenada de transformación disponible.
Si su diseño depende de transformadas de coordenadas anidadas, Raphael no es para usted.
Recientemente he usado tanto Raphael como jQuery SVG, y aquí están mis pensamientos:
Rafael
Ventajas: una buena biblioteca de inicio, fácil de hacer MUCHAS cosas con SVG rápidamente. Bien escrito y documentado. Muchos ejemplos y demostraciones. Arquitectura muy extensible. Genial con la animación.
Contras: es una capa sobre el marcado SVG real, hace que sea difícil hacer cosas más complejas con SVG, como la agrupación (admite Conjuntos, pero no grupos). No hace gran w / edición de elementos ya existentes.
jQuery SVG
Pros: un plugin de jquery, si ya estás usando jQuery. Bien escrito y documentado. Muchos ejemplos y demostraciones. Soporta la mayoría de los elementos SVG, permite el acceso nativo a elementos fácilmente
Contras: la arquitectura no es tan extensible como Rafael. Algunas cosas podrían estar mejor documentadas (como la configuración del elemento SVG). No hace gran w / edición de elementos ya existentes. Se basa en la semántica de SVG para la animación, lo cual no es tan bueno.
SnapSVG como una versión SVG pura de Raphael
SnapSVG es el sucesor de Rafael. Solo se admite en los navegadores habilitados para SVG y es compatible con casi todas las funciones de SVG.
Conclusión
Si estás haciendo algo rápido y fácil, Raphael es una opción fácil. Si vas a hacer algo más complejo, elegí usar jQuery SVG porque puedo manipular el marcado real mucho más fácil que con Raphael. Y si desea una solución que no sea jQuery, SnapSVG es una buena opción.
Si no necesita compatibilidad con VML e IE8, use Canvas (PaperJS, por ejemplo). Mira las últimas demostraciones de IE10 para Windows 7. Tienen increíbles animaciones en Canvas. SVG no es capaz de hacer nada cerca de ellos. Overall Canvas está disponible en todos los navegadores móviles. SVG no está funcionando en las primeras versiones de Android 2.0- 2.3 (como sé)
Sí, Canvas no es escalable, pero es tan rápido que puede volver a dibujar todo el lienzo más rápido que el navegador capaz de desplazarse por el puerto de vista.
Desde mi perspectiva, las optimizaciones de Microsoft proporcionan medios para usar Canvas como motor GDI normal e implementar aplicaciones de gráficos como lo hacemos para Windows ahora.
Soy un gran fan de Raphael y parece que el impulso de desarrollo va fuerte (la versión 0.85 se lanzó a fines de la semana pasada). Otra gran ventaja es que su desarrollador, Dmitry Baranovskiy , está trabajando actualmente en un plugin de gráficos de Raphael, g.raphael , que parece que se está perfilando bastante (hay algunas muestras de la salida de las versiones anteriores en Flickr ) .
Sin embargo, solo para incluir a otro posible contendiente en la mezcla de bibliotecas SVG, la web SVG de Google parece muy prometedora (aunque no soy un gran fan de Flash, que se usa para renderizar en navegadores que no son compatibles con SVG). Probablemente uno para ver, especialmente con la próxima conferencia SVG Open .
También deberías echar un vistazo a svgweb. Utiliza flash para representar svg en IE y, opcionalmente, en otros navegadores (en los casos en que admite más de lo que el navegador en sí).
Voy a emitir mi voto detrás de Raphael: la compatibilidad con varios navegadores, la API limpia y las actualizaciones consistentes (hasta ahora) hacen que sea un placer utilizarlas. Juega muy bien con jQuery también. El procesamiento es genial, pero más útil como demostración en este momento.
Ya que no se menciona aquí todavía: también debe echar un vistazo a Dojox.drawing , que también proporciona buenas capacidades de dibujo SVG. Tiene un conjunto bastante impresionante de características. Estoy empezando un proyecto con él, pero me parece que es muy superior (al menos en términos de características) a Raphael y JQuerySVG.
Esta presentación me convenció de usarla en lugar de Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Referencia: http://dojotoolkit.org/reference-guide/dojox/index.html
Referencia en Dojocampus: http://docs.dojocampus.org/dojox/drawing
Descarga Dojo (incluido Dojox): http://dojotoolkit.org/download/