Introdução ao Raphaël.js

James Williams
James Williams
X Página inicial

Introdução

O SVG, abreviação de "Gráficos vetoriais escaláveis", é uma linguagem baseada em XML para descrever objetos e cenas. Os elementos SVG podem disparar eventos e podem ser roteirizados com JavaScript. O SVG vem com vários tipos primitivos integrados, como círculos e retângulos, além de poder exibir texto. Embora o SVG como tecnologia não seja novo, o HTML5 agora permite que objetos SVG sejam incorporados diretamente em uma página sem o uso de uma tag <object> ou <embed>, alinhando-a ao que está disponível atualmente com a tela. O Raphaël.js é uma biblioteca JavaScript que permite criar cenas SVG de forma programática. Ele usa uma API unificada para criar cenas SVG em que há suporte ou VML(linguagem de modelagem vetorial) em que há suporte, ou seja, versões do Internet Explorer anteriores ao IE9.

Desenhar sua primeira cena

Vamos começar desenhando uma cena simples com o Raphaël. Começamos a desenhar a cena instanciando um objeto Raphaël. Nesse caso, usei o construtor que o insere em um determinado elemento HTML com uma determinada largura e altura, mas você também pode fazer com que o Raphaël anexe o objeto ao DOM (Document Object Model). Em seguida, criei um retângulo fornecendo as posições x e y desejadas com a largura e a altura. Em seguida, criei um círculo fornecendo as coordenadas e o raio desejados. Por fim, usei a função de atributo (attr) para atribuir cores aos objetos.

Cada objeto SVG pode ter atributos atribuídos a ele para coisas como cor, rotação, cor do traço e tamanho, etc. Confira uma lista detalhada de atributos atribuíveis aqui.

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"});

Como desenhar formas avançadas com caminhos

Um caminho é uma série de instruções usadas pelo renderizador para criar objetos. Desenhar com um caminho é como desenhar com uma caneta em uma folha gigante de papel quadriculado. Você pode instruir a caneta para ser levantada do papel e se mover para uma posição diferente(mover para), para desenhar uma linha(linha para) ou para desenhar uma curva(arco para). Os caminhos permitem que o SVG crie objetos com o mesmo nível de detalhes, independentemente da escala. Quando você emite uma instrução para desenhar uma curva, o SVG considera o tamanho original e final desejado da curva (após a escala) e calcula matematicamente os pontos intermediários para renderizar uma curva suave.

O código e a figura abaixo mostram um retângulo e uma curva fechada desenhada com caminhos. A letra M seguida de coordenadas move a caneta para essa posição, L seguido por um par de coordenadas desenha uma linha da posição atual para essa posição. s desenha uma curva de Bézier suave com um determinado ponto de controle e um ponto final com coordenadas relativas. Z fecha um caminho. Geralmente, o uso de uma letra maiúscula emite o comando com coordenadas absolutas, e o uso de letras minúsculas usa coordenadas relativas. M/m e Z/z, respectivamente, emitem o mesmo comando para maiúsculas ou minúsculas. Confira uma lista de todas as instruções de caminho aqui.

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"});

Desenhar texto

Ter ilustrações sem a capacidade de desenhar texto seria muito chato. Felizmente, o Raphaël oferece dois métodos para desenhar texto. O primeiro método, text, recebe coordenadas x e y com a string a ser desenhada. O método de texto não oferece muito controle sobre a fonte ou outros efeitos. Ele desenha na fonte padrão com o tamanho padrão.

O segundo método, print, desenha o texto como uma coleção de caminhos. Como resultado, podemos modificar letras individuais. No exemplo abaixo, colorimos o numeral 5 com um preenchimento laranja, colorimos "ROCKS" com um preenchimento azulado e deixamos o traço mais espesso para simular texto em negrito. Fizemos isso usando uma fonte personalizada com tamanho de 40 pontos.

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"});
}

A fonte Vegur não está no Raphaël, nem qualquer outra. Além disso, a maioria das fontes usa o formato TrueType(TTF) ou OpenType(OTF). Para passar desses formatos para algo que possa ser usado pelo Raphaël, precisamos convertê-los usando uma ferramenta chamada Cufon. O Cufon permite exportar os diferentes estilos de fonte de uma determinada fonte (normal, negrito, itálico, negrito itálico etc.) para uso com o Raphaël. Este tutorial não aborda a Cufon em detalhes. Confira o link mencionado acima para mais detalhes. Uma ótima fonte de fontes livres para seus aplicativos é o diretório de fontes do Google.

Eventos

Os elementos SVG podem se inscrever diretamente em todos os eventos tradicionais baseados em mouse: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup e hover. O Raphaël permite adicionar seus próprios métodos à tela ou a elementos individuais. Portanto, em teoria, nada impede que você adicione gestos para navegadores para dispositivos móveis.

O snippet abaixo vincula uma função para girar uma determinada letra em "ROCKS" 45 graus quando clicada.

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 x tela

Como ambos são métodos para desenhar objetos na tela, muitas vezes não fica claro de imediato por que você deve usar um em vez do outro. Os dois meios têm abordagens muito diferentes. A tela é uma API de modo imediato, muito parecida com o desenho com lápis de cor. É possível limpar ou destruir parte do desenho, mas não é possível reverter ou alterar um traço anterior por padrão. A tela também é um bitmap de raster, portanto, está sujeita a pixelização quando as imagens são dimensionadas. O SVG, por outro lado, como mencionado anteriormente, pode veicular várias resoluções com o mesmo nível de detalhes e pode ser programado.

É bastante simples decidir se você vai usar SVG ou Canvas para programar jogos. Além das restrições normais de se você planeja implantar em computadores ou dispositivos móveis, a contagem de sprites é o que importa. O SVG se presta ao que eu chamo de jogos de baixa fidelidade. Eu os descrevo como jogos que têm movimento simultâneo limitado de objetos e remoção e criação de sprites. Muitos jogos de tabuleiro, como xadrez, damas ou batalha naval, bem como jogos de cartas como BlackJack, pôquer e copas, se encaixam nessa categoria. Outro ponto em comum é que, em muitos desses jogos, o jogador precisa mover um objeto arbitrário, e a capacidade de script do SVG facilita a seleção de objetos.

Ferramentas de criação para SVG

O uso de SVG não significa que você precisa criar caminhos manualmente. Há várias ferramentas, comerciais e de código aberto, que permitem exportar para SVG. As duas ferramentas que usei bastante e recomendo são o Inkscape e o svg-edit.

svg-edit

O svg-edit é um editor SVG baseado em navegador escrito em JavaScript. Ele oferece uma interface do usuário limitada que lembra o GIMP ou o MS Paint. A menos que o nível de detalhes fosse relativamente baixo, eu usava principalmente o svg-edit para ajustar desenhos SVG em vez de criá-los. O svg-edit permite criar objetos graficamente ou com código SVG.

Inkscape

O Inkscape é um editor de gráficos vetoriais multiplataforma completo, semelhante ao CorelDraw, Adobe Illustrator e Xara. O Inkscape se beneficia de uma comunidade de plug-ins vibrante e uma base de código madura. O antecessor do Inkscape, do qual ele se originou, foi desenvolvido em 1999. O Inkscape é meu aplicativo preferido para recursos baseados em vetores e bitmap.

Um pequeno aparte

O SVG não é compatível com o Windows em versões do Internet Explorer anteriores ao IE9. O IE usa um formato de gráficos vetoriais chamado VML, Vector Markup Language, que oferece grande parte da mesma funcionalidade do SVG. O Raphaël pode criar cenas que usam SVG ou VML, quando houver suporte. Usar o Raphaël é uma maneira fácil de oferecer suporte a várias plataformas.

Referências