Desenhando Primitivas com Canvas
Home Android Desenhando Primitivas com Canvas
O objetivo deste artigo é mostrar como desenhar primitivas gráficas em uma tela de desenho baseada na classe View em Android.
A classe View é responsável por prover uma interface de desenho e detecção de eventos. Existem vários métodos que podem ser sobrescritos, entretanto, existe um particularmente interessante para o desenvolvimento de jogos: o método onDraw, o qual nos provê um objeto da classe Canvas que nos permitirá desenhar na View.
O exemplo desenvolvido neste artigo foi implementado em Eclipse Juno com ADT Plugin v.22.3 e Android SDK 4.3 (API 18).
Neste artigo vamos utilizar alguns métodos de desenho de primitivas da classe Canvas, como segue:
Sendo [x, y] as coordenadas do ponto e paint o objeto de configuração.
Sendo [startX, startY] e [stopX, stopY] as coordenadas inicial e final da linha e paint o objeto de configuração.
Sendo [left, top] as coordenadas do canto superior esquerdo e [right, bottom] as coordenadas do canto inferior direito do retângulo e paint o objeto de configuração.
Sendo [cx, cy] o centro do círculo, radius o raio do círculo e paint o objeto de configuração.
Sendo path o objeto que representa o caminho e paint o objeto de configuração (ver na sequência).
Como pode ser visto acima, todas as funções possuem um parâmetro paint. Um objeto da classe Paint é utilizado para configurar o que está sendo desenhado. Sua principais configurações englobam estilo de preenchimento (Paint.setStyle) e cor de desenho (Paint.setColor).
Passo a passo: Implementação
Inicialmente crie um projeto com as seguintes configurações:
Nas demais telas usamos as configurações padrão do Plugin.
Será gerado automaticamente o arquivo MainActivity.java, localizado na pasta src do projeto, dentro do package br.com.pontov.primitivas criado.
Para este projeto vamos partir da estrutura criada no tutorial "Criando uma View de Desenho no Android" (para mais informações consulte este artigo), como segue:
Como pode ser observado na linha 26 o método onDraw nos oferece um objeto da classe Canvas, objeto este que possui as diversas funções de desenho vistas acima.
Declare na classe Tela as propriedades como segue:
Com o objeto Paint (linha 26) vamos configurar as cores das nossas primitivas; o objeto Random será utilizado para criar cores e coordenadas aleatórias em nosso app. Para os desenhos de pontos, linhas, retângulos e círculos criaremos algumas áreas de tamanho [wArea, hArea] que delimitarão os desenhos.
As linhas 39-44 acima geram 2000 pontos em posições aleatórias dentro da área definida por [wArea, hArea], cada um com uma cor aleatória. Perceba o uso de rnd.nextInt(256), o qual nos retorna valores entre 0 e 255, os quais são usados para configurar os níveis de cada componente de cor.
As linhas 46-53 geram 500 linhas em posições aleatórias dentro da área definida por [wArea + 250, hArea], cada uma com uma cor aleatória.
As linhas 55-62 geram 100 retângulos em posições aleatórias dentro da área definida por [wArea, hArea + 250], cada um com uma cor aleatória.
As linhas 64-70 geram 100 círculos em posições aleatórias dentro da área definida por [wArea + 250, hArea + 250], cada um com uma cor aleatória.
Nas linhas 73, 76, 79 e 82 temos 4 chamadas ao método drawPoligon (linhas 87-97). O método drawPoligon usa os conceitos de seno e cosseno para efetuar o cálculo dos pontos de cada polígono a ser desenhado em função do seu raio e sua quantidade de lados, retornando um objeto da classe Path. O objeto Path é muito versátil, podendo incluir dentro de um mesmo caminho diversas primitivas, como linhas, arcos, ovais e até mesmo outros paths.
Rodando o projeto temos o seguinte resultado:
O resultado fica mais interessante se, ao final do método onDraw() invocarmos o método invalidate(), o qual faz com que haja uma atualização constante da tela após o desenho, fazendo variar as posições e cores de todas as primitivas.
Além do desenho de primitivas, o objeto Canvas nos permite desenhar imagens na tela de nossa App. Este será o tema do nosso próximo artigo.
31/12/2015 17:32:50 |179.214.65.xxx| Roberto Moraes - Artigo primitivas
muito claro, conciso e interessante!
Ví poucos trabalhos tão bem esclarecedores e didáticos como o seu,
Parabéns, Maicris !
10/01/2016 13:30:07 |189.78.40.xxx| Renato - Canvas
Parabéns Maicris, ótimo artigo.
Você tem como me orientar como posso criar uma linha que possa ser redimensionada pelo usuário e ainda ao se conectar com um retângulo, por exemplo, ao arrastar o retângulo também arraste a linha conectada? Como se fosse símbolos de um fluxograma em que ao arrastar um símbolo a linha viria junto? Minha dúvida não está em dragndrop e sim na construção desse tipo de linha e sua conexão com outras figuras.