Archive for the 'SVG' Category
SVG AS3 Viewer - 13/04/2008
Uno de los requistos para flowde es la creacion en linea de iconos personalizados, además estos deben ser fáciles de almacenar y editar, por eso siempre he pensado que svg es la mejor solucion tanto para crear, editar, guardar y visualizar dibujos sencillos hechos en linea.
Por mucho tiempo busque en internet una solución para esto pero no puede encontrar ninguna que cumpliera con mis espectativas, por lo mismo decidi crear mi propia clase en actionscript, luego de 3 dias el resultado es bastante aceptable aunque necesita trabajo posterior es lo suficiente para lo que yo necesito.
La clase svgViewer soporta los tags :svg, g, path, rect, circle, ellipse, polyline,polygon, como todas las implementaciones “pequeñas” de svg que se encuentran en la red no sporta información de arcos. Tambien la clase posee una implementacion bastante simple o ingenua del tag text, ya que no soporta el tag tspan por ahora. Tiene soporte para transformaciones: transtale, rotate, y scale
Puedes ver una version funcional aqui: http://www.flowde.com/blog-examples/svg/ donde hay varios ejemplos de croczilla y otros de herramientas que “imprimen” a svg, estos últimos son bastante complejos asi que la clase no es capaz de renderizarlos correctamente. Puedes descargar los archivos as3 ademas de los svg de prueba aqui: http://www.flowde.com/blog-examples/svg/svgViewer.rar
Para uilizarlo solo necesitas agregar el siguiente codigo
var viewer:svgViewer=null;
viewer=new svgViewer();
viewer.loadXML(url);
addChild(viewer);
Respecto a la velocidad la clase dibuja el tiger.svg de Croczilla en 0.9 segundos, pero vamos que esto es solo para dibujar iconos, asi que por ahora creo que esta bien.
Esta implementación utiliza dos clases de otros autores: El manejo del tag path se hizo utilizando una implementacion que puedes encontrar en el blog de Zaboo que a su vez esta basado en una implementacion que puedes encontrar aqui , también utiliza una clase ColorUtil que permite pasar de un string valido de color a un valor hexadecimal que encontre en un foro de as3, pero no he podido encontrar la direccion asi que agradeceria que alguien si lo encuentra me indicara la direccion para agregarla debidamente.
Otras implementaciones de SVG en AS3:
http://code.google.com/p/as3svgrendererlib/ intetente correr butterfly.svg de croczilla y no resulto nada bien.
http://memo.tv/drawing_and_exporting_svg_from_flash_as3 una implementación bastante sencilla para guardar un dibujo a mano alzada en svg.
µSprite es un editor que te eprmite pasar de codigo svg a CODIGO en as3, nunca me parecio buena idea guardar en el servidor un codigo as3 para dibujar por lo que a pesar de verse como buena implementacion decidi por no usarlo.
La clase en cuestion es un trabajo no terminado asi que agradeceria cualquier ayuda que pudieran dar.