terça-feira, 9 de setembro de 2008

Imagens SVG com J2ME

Olá povo,

Vê só, antes de mais nada, quero dizer que esse post é sobre um assunto que eu começei a dar uma 'fuçada' agora. Então, qaulquer besteira que eu fale, me perdoem.

No projeto em que estou trabalhando, os designers elaboraram uma tela principal da aplicação onde os ícones para acesso às funcionalidades da aplicação tinham um comportamento 'meio 3D'. Porque eu digo 'meio'? Por que ele só usava uma profundidade pra mostrar qual ícone estava selecionado.
Infelizmente o aparelho não tinha suporte pra JSR-184 (Java Mobile 3D), então tivemos que fazer as coisas usando 2D mesmo.
Conversando com um colega, ele nos sugeriu dar uma olhada em SVG (Scalable Vectorial Graphics) pra JavaME. Resolví dar uma olhada em um artigo da WebMobile que falava sobre o assunto (infelizmente agora não lembro do nome do autor do artigo) e ver o que realmente ela poderia ajudar.
O SVG é uma linguagem pra descrever imagens bi-dimensionais em XML. SVG Tiny é um subconjunto do SVG utilizado para utilizar essas imagens em dispositivos móveis. A JSR-226 define uma API para carregar, manipular e pintar esse tipo de imagem. Ela não está contida por padrão em nenhum perfil ou configuração, sendo assim, sua implementação fica à cargo de cada fabricante. Como os cálculos vetoriais são realizados com ponto flutuante, a configuração CLDC1.1 é requerida.
Essa API faz algumas 'mágicas' as quais não conseguimos com imagens bitmap, mas a maior delas é o poder de redimensionar a imagem via código. Como a imagem não passa de um arquivo texto com coordenadas relativas, basta refazer os cálculos e renderizar a imagem novamente. Isso traz um enorme benefício quando falamos em portabilidade de aplicações que usam Canvas, visto que, se usarmos esse tipo de imagem, basta fazermos o código para que essas imagens seja expandidas para que aplicação rode sem problemas em qualquer telefone, independente do tamanho da tela.
Bem, vamos a um pouquinho de prática. Segue abaixo um arquivo *.svg que pinta 3 quadrados e um texto.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]>
<svg version="1.1" baseProfile="tiny" id="root" xmlns="&ns_svg;"
xmlns:xlink="&ns_xlink;" width="176" height="208"
preserveAspectRatio="none" viewBox="0 0 176 208" xml:space="preserve">

<rect id="r1" x="0" y="0" fill="#FFFFFF" stroke="#000000" width="176" height="208"/>
<rect id="r2" x="20" y="20" fill="#FFFF00" stroke="#000000" stroke-width="2" width="136" height="168"/>
<rect id="r3" x="60" y="60" fill="#FF0000" stroke="#000000" stroke-width="2" width="56" height="88"/>
<text id="xy" x="88" y="104" text-anchor="middle" font-family="Arial" font-size="10">88,104</text>
</svg>


E agora o código do canvas que carrega e pinta essa imagem na tela.

class SvgCanvas extends Canvas {

private ScalableGraphics sg;

private SVGImage svgImage;

public SvgCanvas() {
sg = ScalableGraphics.createInstance();
try {
InputStream is = getClass().getResourceAsStream
("/res/svg/retangulo.svg");
svgImage = (SVGImage)SVGImage.createImage(is, null);
} catch (Exception e) {
e.printStackTrace();
}
}

protected void paint(Graphics g) {
g.setColor(0xFFFFFF);
g.fillRect(0, 0, getWidth(), getHeight());

sg.bindTarget(g);
sg.render(0, 0, svgImage);
sg.releaseTarget();
}
}


Bem pessoal, apesar de todos esses benefícios trazidos pelas imagens vetoriais, poucos aparelhos trazem a implementação da JSR-226. E a renderização dessas imagens parece ser bem lenta, tendo em vista toda a leitura do XML e dos cálculos efetuados.
Pra finalizar, vou dar meu aval: Por enquanto, não gostei. No entanto, quem sabe com celulares mais poderosos poderemos ter esse tipo utilização de imagens mais viável.

Dêem sua opinião, porque, como eu falei, tô começando a estudar isso agora.
Maiores informações:
http://www.w3.org/Graphics/SVG/
http://www.jcp.org/en/jsr/detail?id=226
http://pt.wikipedia.org/wiki/SVG

4br4ç05,
nglauber

Nenhum comentário: