Construção e transformação de um desenho vetorial

ANHANGUERA EDUCACIONAL
Universidade Anhanguera de São Paulo
Santo André - Unidade 3

CIÊNCIAS DA COMPUTAÇÃO – CCS1A
Sistemas e Aplicações Multimídia

Exercício de SVG – Construção e transformação de um desenho vetorial

Santo André
2015
Exercício de SVG – Construção e transformação de um desenho vetorial

Sistemas e Aplicações Multimídia

RESUMO

Desenhos vetoriais empregam fórmulas matemáticas para compor figuras. As técnicas de desenho vetorial possuem embutidas muitas funções para a composição e transformação desses desenhos. O SVG (Scalable Vector Graphics) é uma liguagem de definição de gráficos vetoriais baseada em XML que possui inúmeros recursos. A proposta desse exercício é compreender algumas funções básicas do SVG, que simplificam a construção de desenhos complexos, ocultando do programador toda a complexidade dos cálculos.
Palavras-Chave: SVG. Transformações 2D.

1. Introdução

Para entender a complexidade de cálculos que são encolvidos numa simples função SVG, propõe-se:
1. Construir uma estrela de cinco pontas;
2. Em um documento HTML, construir quatro quadrantes;
3. No primeiro quadrante, mostrar a estrela construída no passo 1;
4. No segundo quadrante, mostrar a estrela e um exemplo de translação, à semelhança da função Translate(x,y) do SVG;
5. No terceiro quadrante, mostrar a estrela rotacionada a 180 graus, à semelhança da função rotate(180) do SVG;
6. No quarto quadrante, efetuar um cisalhamento da estrela.

2. A construção da estrela

Para construirmos uma estrela de cinco pontas, matematicamente correta, vamos utilizar as noções básicas de geometria plana. A estrela de cinco pontas desenvolve-se a partir de um pentágono regular. A figura, bastante estudada, está relacionada ao pentágono e ao pentagrama.

Figura 1: Pentagrama, e círculos correspondetes e estrela de cinco pontas (fonte: http://mathworld.wolfram.com/Pentagram.html )

Figura 2: Pentagrama dentro de um pentágono. (fonte: