Ponto V!

Home Android Desenhando Primitivas com Canvas
Maicris Fernandes
Desenhando Primitivas com CanvasImprimir
Escrito por Maicris Fernandes

Prezado leitor,

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).

Embasamento teórico

Neste artigo vamos utilizar alguns métodos de desenho de primitivas da classe Canvas, como segue:

Pontos

public void drawPoint (float x, float y, Paint paint)

Sendo [x, y] as coordenadas do ponto e paint o objeto de configuração.

Linhas

public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint)

Sendo [startX, startY] e [stopX, stopY] as coordenadas inicial e final da linha e paint o objeto de configuração.

Retângulos

public void drawRect (float left, float top, float right, float bottom, Paint paint)

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.

Círculos

public void drawCircle (float cx, float cy, float radius, Paint paint)

Sendo [cx, cy] o centro do círculo, radius o raio do círculo e paint o objeto de configuração.

Caminhos

public void drawPath (Path path, Paint paint)

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:

clip_image002

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:

clip_image004

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:

clip_image006

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.

clip_image008

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.

clip_image010

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.

clip_image012

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.

clip_image014

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.

clip_image016

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:

clip_image018

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.

O que vem a seguir?

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.

Até a próxima!

Código fonte

download


Comentários (2)
  • Roberto Moraes  - Artigo primitivas
    avatar

    Show de bola seu artigo!!!

    muito claro, conciso e interessante!

    Ví poucos trabalhos tão bem esclarecedores e didáticos como o seu,

    Parabéns, Maicris :) :) !

  • Renato  - Canvas
    avatar

    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. :S

Escrever um comentário
Your Contact Details:
Gravatar enabled
Comentário:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch::(:shock:
:X:side::):P:unsure::woohoo::huh::whistle:;):S:!::?::idea::arrow:
Security
Por favor coloque o código anti-spam que você lê na imagem.
LAST_UPDATED2  

Busca

Linguagens

Twitter