Canvas no Android: Funcionalidades Fundamentais para Views Personalizadas

No desenvolvimento de Views personalizadas no Android, o processo de desenho ocorre no método onDraw, onde o objeto Canvas atua como a superfície de desenho. Juntamente com Paint e Path, o Canvas oferece diversas APIs para renderizar gráficos. Este artigo explora as funcionalidades mais utilizadas do Canvas, incluindo desenhos básicos, recorte e transformações geométricas.

Iniciando com onDraw

O método onDraw é o ponto de partida para o desenho custoimzado. Um exemplo simples demonstra como desenhar um círculo utilizando um Canvas e um Paint:

Pincel pincel = new Pincel();
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(250, 250, 150, pincel);
}

Este código desenha um círculo centrado nas coordenadas (250, 250) com raio de 150 pixels. O sistema de coordenadas no Canvas tem origem no canto superior esquerdo da View, com o eixo X apontando para a direita e o eixo Y para baixo.

Principais Métodos de Desenho

O Canvas fornece métodos para desenhar formas geométricas, como drawCircle, drawRect, entre outros. Abaixo, alguns exemplos com parâmetros modificados para ilustrar variações.

Preenchimento de Cor

Para preencher toda a área de desenho com uma cor sólida:

canvas.drawColor(Color.BLUE);
canvas.drawRGB(200, 100, 50);
canvas.drawARGB(100, 0, 0, 255);

Desenho de Círculos e Retângulos

O método drawCircle requer coordenadas do centro e raio, enquanto drawRect utiliza coordenadas das bordas:

canvas.drawCircle(400, 300, 100, pincel);
canvas.drawRect(50, 50, 450, 450, pincel);
canvas.drawRect(new Rect(150, 150, 350, 350), pincel);

Pontos e Linhas

Parra desenhar múltiplos pontos ou linhas, utilize arrays de coordenadas:

float[] pontos = {10, 20, 30, 40, 50, 60};
canvas.drawPoints(pontos, 0, 6, pincel);
canvas.drawLine(100, 200, 600, 800, pincel);

Formas Complexas

Elipses e arcos são definidos por retângulos delimitadores. Para um arco ou setor circular:

canvas.drawOval(100, 100, 500, 300, pincel);
canvas.drawRoundRect(100, 100, 500, 300, 30, 30, pincel);
canvas.drawArc(100, 100, 600, 500, -90, 180, true, pincel);

Recorte no Canvas

O recorte permite delimitar a área visível do desenho. Os métodos clipRect e clipPath são comuns, e devem ser acompanhados de save() e restore() para evitar interferências.

canvas.save();
Bitmap figura = BitmapFactory.decodeResource(getResources(), R.drawable.imagem);
canvas.clipRect(200, 200, 600, 600);
canvas.drawBitmap(figura, 150, 150, pincel);
canvas.restore();

Para recorte com formas personalizadas, utilize clipPath:

Path caminho = new Path();
caminho.addCircle(300, 300, 200, Path.Direction.CW);
canvas.save();
canvas.clipPath(caminho);
canvas.drawBitmap(figura, 200, 200, pincel);
canvas.restore();

Transformações Geométricas

Transformações como translação, rotação, escala e inclinação podem ser aplicadas diretamente via Canvas ou utilizando Matrix.

Transformações Diretas no Canvas

Use métodos como translate, rotate, scale e skew:

canvas.save();
canvas.translate(100, 50);
canvas.rotate(30, 300, 300);
canvas.scale(1.2f, 1.2f, 300, 300);
canvas.skew(0, 0.3f);
canvas.drawBitmap(figura, 100, 100, pincel);
canvas.restore();

Utilizando Matrix para Transformações

A classe Matrix permite transformações mais flexíveis. Após configurar a matriz, aplique-a ao Canvas com concat:

Matrix matriz = new Matrix();
matriz.postTranslate(0, 80);
matriz.postRotate(60, 250, 250);
matriz.postScale(1.5f, 1.5f, 250, 250);
canvas.save();
canvas.concat(matriz);
canvas.drawBitmap(figura, 100, 100, pincel);
canvas.restore();

Para transformações personalizadas, métodos como setPolyToPoly no Matrix permitem distorções arbitrárias, úteis para efeitos como mapeamento de texttura.

Esses recursos do Canvas são essenciais para criar interfaces gráficas ricas e dinâmicas em aplicações Android. A prática combinada com Paint e Path expande ainda mais as possibilidades de customização.

Tags: android Canvas View personalizada desenho 2D recorte

Publicado em 7-21 16:33