Introducción a Raphaël.js

James Williams

Introducción

SVG, que significa Gráficos vectoriales escalables, es un lenguaje basado en XML para describir objetos y escenas. Los elementos SVG pueden activar eventos y se pueden usar en secuencias de comandos de JavaScript. SVG incluye varios tipos primitivos integrados, como círculos y rectángulos, y puede mostrar texto. Si bien SVG como tecnología no es nuevo, HTML5 ahora permite que los objetos SVG se incorporen directamente en una página sin usar una etiqueta <object> o <embed> para alinearlos con lo que está disponible actualmente con el lienzo. Raphaël.js es una biblioteca de JavaScript que te permite crear escenas SVG de manera programática. Utiliza una API unificada para crear escenas SVG en las que es compatible o VML(lenguaje de modelado vectorial) donde está ahora, es decir, versiones de Internet Explorer anteriores a IE9.

Dibuja tu primera escena

Comencemos por dibujar una escena simple con Raphaël. Comenzamos a dibujar la escena creando una instancia de un objeto Raphaël. En este caso, usé el constructor que lo inserta en un elemento HTML determinado con un ancho y una altura determinados, pero también podrías hacer que Raphaël agregue el objeto al DOM (Modelo de objetos del documento). A continuación, creé un rectángulo proporcionando las posiciones de X e Y deseadas con el ancho y la altura. A continuación, creé un círculo al darle las coordenadas y el radio deseados. Por último, usé la función de atributo (attr) para asignar colores a los objetos.

A cada objeto SVG se le pueden asignar atributos según el color, la rotación, el color y el tamaño del trazo, entre otros. Puedes encontrar una lista detallada de los atributos asignables aquí.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

Cómo dibujar formas avanzadas con rutas

Una ruta es una serie de instrucciones que usa el procesador para crear objetos. Dibujar con una ruta es como dibujar con un bolígrafo sobre una hoja gigante de papel cuadriculado. Puedes indicar que el bolígrafo se levante del papel y se mueva a una posición diferente(mover a), para dibujar una línea(una línea a) o para dibujar una curva(un arco). Las rutas de acceso permiten que SVG cree objetos con el mismo nivel de detalle, sin importar la escala. Cuando emites una instrucción para dibujar una curva, SVG tiene en cuenta el tamaño deseado original y final de la curva (después del escalamiento), calcula matemáticamente los puntos intermedios para renderizar una curva suave.

El código y la figura que se incluyen a continuación muestran un rectángulo y una curva cerrada dibujada con trazados. La letra M seguida de coordenadas mueve el lápiz a esa posición, mientras L seguido de un par de coordenadas dibuja una línea desde esa posición actual hasta esa posición. Dibuja una curva de Bézier suave con un punto de control y un extremo determinados con coordenadas relativas. Z cierra una ruta. Por lo general, cuando se usa una letra mayúscula, se envía el comando con coordenadas absolutas, mientras que en minúsculas, se usan coordenadas relativas. M/m y Z/z, respectivamente, emiten el mismo comando para mayúsculas o minúsculas. Puedes ver una lista de todas las instrucciones de la ruta aquí.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

Cómo dibujar texto

Tener ilustraciones sin la capacidad de dibujar texto sería muy aburrido. Por suerte, Raphaël proporciona dos métodos para hacerlo. El primer método, texto, toma las coordenadas x e y junto con la cadena que se dibujará. El método de texto no te brinda mucho control sobre la fuente u otros efectos. Se dibuja en la fuente predeterminada con el tamaño predeterminado.

El segundo método, print, dibuja el texto como una colección de rutas. Como resultado, podemos modificar letras individuales. En el siguiente ejemplo, coloreamos el número 5 con un relleno naranja, color "ROCKS" con un relleno azul y agrandamos el trazo para simular texto en negrita. Lo hicimos con una fuente personalizada con un tamaño de fuente de 40 puntos.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

La fuente Vegur no está en Raphaël, y tampoco lo es. Además, la mayoría de las fuentes usan el formato OpenType(OTF) o TrueType(TTF). Para pasar de esos formatos a algo que Raphaël pueda usar, debemos convertirlos con una herramienta llamada Cufon. Cufon te permite exportar los diferentes estilos de una fuente determinada (regular, negrita, cursiva, negrita, cursiva, etc.) a fin de usarlos con Raphaël. No abordar Cufon en detalle está fuera del alcance de este instructivo. Consulta el vínculo de advertencia para obtener más detalles. El directorio de fuentes de Google es una gran fuente de fuentes sencillas para tus aplicaciones.

Eventos

Los elementos SVG se pueden suscribir directamente a todos los eventos tradicionales basados en mouse: clic, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup y desplazamiento del mouse. Raphaël permite agregar tus propios métodos al lienzo o a los elementos individuales, por lo que, en teoría, no hay nada que te impida agregar gestos en los navegadores para dispositivos móviles.

El siguiente fragmento vincula una función para rotar una letra determinada en "ROCKS" 45 grados cuando se hace clic en ella.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG frente a lienzo

Dado que ambos son métodos para dibujar objetos en la pantalla, a menudo no está claro de inmediato por qué debes usar uno sobre el otro. Los dos medios tienen enfoques muy diferentes. Canvas es una API de modo inmediato que se asemeja a dibujar con crayones. Puedes borrar o destruir parte del dibujo, pero no puedes revertir ni modificar un trazo anterior de forma predeterminada. El lienzo también es un mapa de bits de trama, por lo que está muy sujeto a pixelado cuando se ajustan las imágenes. Por otro lado, como se mencionó antes, los SVG pueden entregar varias resoluciones con el mismo nivel de detalle y se pueden programar.

Usar SVG o Canvas para programar juegos es bastante simple. Además de las limitaciones normales de implementar en computadoras de escritorio o dispositivos móviles, el problema se reduce al recuento de objetos. SVG se presta a lo que llamaríamos juegos de baja fidelidad. Los describo como juegos que tienen movimientos simultáneos limitados de los objetos y la eliminación y creación de objetos. Muchos juegos de mesa como ajedrez, damas o acorazados, así como juegos de cartas como BlackJack, póquer y corazones, entran en esta categoría. Otro subproceso unificador es que, en muchos de estos juegos, el jugador deberá mover un objeto arbitrario, y la capacidad de secuencia de comandos de SVG facilita la selección de objetos.

Herramientas de creación para SVG

El uso de SVG no significa en absoluto que debas crear rutas manualmente. Existen varias herramientas, tanto de código abierto como comerciales, que te permiten exportar a SVG. Las dos herramientas que utilicé con frecuencia y las recomiendo encarecidamente son Inkscape y svg-edit.

svg-edit

svg-edit es un editor de SVG basado en el navegador escrito en JavaScript. Proporciona una interfaz de usuario limitada que recuerda a GIMP o MS Paint. A menos que el nivel de detalle fuera relativamente bajo, he usado svg-edit principalmente para modificar dibujos SVG en lugar de crearlos. svg-edit te permite crear objetos de manera gráfica o con código SVG.

Paisaje de tinta

Inkscape es un editor integral de gráficos vectoriales multiplataforma, similar a CorelDraw, Adobe Illustrator y Xara. Inkscape se beneficia de una comunidad de complementos activa y una base de código madura. El predecesor de Inkscape, desde el que se bifurcó Inkscape, se desarrolló en 1999. Inkscape es mi aplicación preferida de recursos basados en vectores y mapas de bits.

Un menor aparte

SVG no es compatible con Windows en las versiones de Internet Explorer anteriores a IE9. IE utiliza un formato de gráficos vectoriales llamado VML (lenguaje de marcado vectorial, que proporciona muchas de las mismas funciones que SVG). Raphaël puede crear escenas que usan SVG o VML cuando sea compatible. Raphaël es una forma sencilla de brindar soporte multiplataforma.

Referencias