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 escribir secuencias de comandos con JavaScript. SVG incluye varios tipos de primitivos integrados, como círculos y rectángulos, además de poder mostrar texto. Si bien SVG como tecnología no es nueva, HTML5 ahora permite que los objetos SVG se incorporen directamente en una página sin usar una etiqueta <object> o <embed>, lo que lo alinea 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. Usa una API unificada para crear escenas SVG donde sea compatible o VML(lenguaje de modelado vectorial) donde esté disponible, es decir, versiones de Internet Explorer anteriores a IE9.

Dibuja tu primera escena

Comencemos por dibujar una escena simple con Raphaël. Para comenzar a dibujar la escena, creamos una instancia de un objeto Raphaël. En este caso, use el constructor que lo inserta en un elemento HTML determinado con un ancho y una altura determinados, pero también puedes hacer que Raphaël adjunte el objeto al DOM (modelo de objetos de documentos). A continuación, creé un rectángulo proporcionando las posiciones x e y deseadas con el ancho y la altura. A continuación, creé un círculo con las coordenadas y el radio deseados. Por último, usé la función de atributo (attr) para asignar colores a los objetos.

Cada objeto SVG puede tener atributos asignados para elementos como el color, la rotación, el color y el tamaño del trazo, etc. 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 renderizador para crear objetos. Dibujar con una ruta es como dibujar con un bolígrafo en un papel cuadriculado gigante. Puedes indicar que la pluma se levante del papel y se mueva a una posición diferente(mover a), para dibujar una línea(línea a) o para dibujar una curva(arco a). Las rutas permiten que SVG cree objetos con el mismo nivel de detalle, independientemente de la escala. Cuando emites una instrucción para dibujar una curva, SVG tiene en cuenta el tamaño original y final deseado de la curva (después de la escala) y calcula matemáticamente los puntos intermedios para renderizar una curva suave.

En el código y la figura que aparecen a continuación, se muestra un rectángulo y una curva cerrada dibujada con rutas. La letra M seguida de coordenadas mueve la pluma a esa posición, la L seguida de un par de coordenadas dibuja una línea desde la posición actual hasta esa posición. S dibuja una curva Bézier suave con un punto de control y un extremo determinados con coordenadas relativas. Z cierra una ruta. Por lo general, usar una letra mayúscula emite el comando con coordenadas absolutas, mientras que las minúsculas 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. Afortunadamente, Raphaël proporciona dos métodos para dibujar texto. El primer método, text, toma coordenadas x e y junto con la cadena para dibujar. El método de texto no te brinda mucho control sobre la fuente ni otros efectos. 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, coloreamos "ROCKS" con un relleno azulado y hicimos que el trazo fuera más grueso para simular texto en negrita. Para ello, usamos 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, ni ninguna otra fuente. Además, la mayoría de las fuentes usan el formato TrueType(TTF) o OpenType(OTF). 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 fuente de una fuente determinada (normal, negrita, cursiva, negrita cursiva, etc.) para usar con Raphaël. No se aborda Cufon en detalle en este instructivo. Consulta el vínculo mencionado anteriormente para obtener más detalles. Una excelente fuente de fuentes sin restricciones para tus aplicaciones es el Directorio de fuentes de Google.

Eventos

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

En el siguiente fragmento, se 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 en comparación con Canvas

Dado que ambos son métodos para dibujar objetos en la pantalla, a menudo no es del todo claro por qué deberías usar uno en lugar del otro. Los dos medios tienen enfoques muy diferentes. Canvas es una API de modo inmediato que es muy similar a dibujar con crayones. Puedes borrar o destruir parte del dibujo, pero no puedes revertir ni alterar un trazo anterior de forma predeterminada. Canvas también es un mapa de bits de trama, por lo que está muy sujeto a la pixelación cuando se escalan las imágenes. Por otro lado, como se mencionó anteriormente, SVG puede entregar varias resoluciones con el mismo nivel de detalle y se puede escribir en secuencias de comandos.

La decisión de usar SVG o Canvas para la programación de juegos es bastante sencilla. Además de las restricciones normales de si planeas implementar en computadoras de escritorio o dispositivos móviles, todo se reduce al recuento de sprites. SVG se presta a lo que yo llamaría juegos de baja fidelidad. Los describo como juegos que tienen un movimiento simultáneo limitado de objetos y la eliminación y creación de sprites. Muchos juegos de mesa, como el ajedrez, las damas o el Battleship, así como los juegos de cartas, como el blackjack, el póquer y los corazones, pertenecen a esta categoría. Otro tema unificador es que, en muchos de estos juegos, un jugador necesitará mover un objeto arbitrario, y la capacidad de escritura de secuencias de comandos de SVG facilita la selección de objetos.

Herramientas de creación para SVG

El uso de SVG no significa que debas crear rutas de forma manual. Existen varias herramientas, tanto de código abierto como comerciales, que te permiten exportar a SVG. Las dos herramientas que usé mucho y recomiendo 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, usé svg-edit principalmente para modificar los dibujos SVG en lugar de crearlos. svg-edit te permite crear objetos de forma gráfica o con código SVG.

Inkscape

Inkscape es un editor de gráficos vectoriales multiplataforma completo, similar a CorelDraw, Adobe Illustrator y Xara. Inkscape se beneficia de una comunidad de complementos vibrante y una base de código madura. El predecesor de Inkscape, del que se originó Inkscape, se desarrolló en 1999. Inkscape es mi aplicación de referencia para los recursos basados en vectores y en mapas de bits.

Una digresión menor

SVG no es compatible con Windows en versiones de Internet Explorer anteriores a IE9. IE usa un formato de gráficos vectoriales llamado VML, Vector Markup Language, que proporciona muchas de las mismas funciones que SVG. Raphaël puede crear escenas que usen SVG o VML donde sea compatible. Usar Raphaël es una forma fácil de proporcionar compatibilidad multiplataforma.

Referencias