Raphäel JS - Desenho e Animação

Biblioteca para desenho e animações com SVG

Publicado em: 22 de Abril de 2013 as 00:12h por Lucas Klassmann em Javascript.

Tags: raphaeljs animacao javascript


O que é Raphäel JS?

Raphäel JS é uma biblioteca para desenho e animação de imagens vetoriais em SVG.

A maioria dos browsers atualmente permitem o uso de conteúdo SVG, na verdade os navegadores mais comuns como Firefox, Chrome, Opera e até mesmo o Internet Explorer nas versões mais atuais, conseguem trabalhar com este tipo de conteúdo.

Você pode encontrar mais informações aqui.

Mas afinal o que é possivel fazer com SVG?

Abaixo temos alguns exemplos do que a biblioteca é capaz de fazer com SVG, esses exemplos foram retirados da própria galeria do Raphael JS, clique no exemplo para visualizar uma demonstração.

Gráfico Analítico

Gráfico em Pizza

Mapa do Mundo

Colocando a mão na massa

Bom, os exemplos acima mostram um pouco do que é possível fazer com o Raphael JS. Eu vou começar neste primeiro post sobre o assunto, com alguns exemplos bem simples, mas bem explicados.

Em um outro momento irei dar exemplos mais complexos.

Como funciona?

Trabalhar com a biblioteca consiste basicamente em criar uma <div> e inicializar para que seja criado dentro desta uma área para desenho(também chamado de canvas), normalmente nomeada como Paper, após criar uma instância de Raphael, você fará chamadas dos ...


Leia mais »