Sumário

Defina a tela para que não role ............................................................................................................... 2

Adicione um Canvas................................................................................................................................ 3
Altere a altura (height) e a largura (width) da tela para preencher o pai (fill parent) ................................ 3
Obtenha um bloco de evento Canvas.Dragged ....................................................................................... 4
Obtenha um bloco de chamada Canvas.DrawLine ................................................................................. 5

DigitalDoodle: aplicativo de desenho

Este tutorial mostrará como desenhar uma linha na tela enquanto o usuário arrasta o dedo.

Comece um novo projeto

Na página Meus Projetos, clique em Novo Projeto. Se você tiver outro projeto aberto, vá ao menu
Meus Projetos e escolha Novo Projeto
.

DigitalDoodle: Drawing App - 1

 Nomeie o projeto

Chame este projeto de DigitalDoodle ou crie seu próprio nome para este aplicativo de desenho.

Defina a tela para que não role

A configuração padrão do App Inventor é que a tela do seu aplicativo será "rolável" (scrollable), o que
significa que a interface do usuário pode ir além do limite da tela e o usuário pode rolar para baixo
passando o dedo (como rolar em uma página da web ) Quando estiver usando um Canvas, você deve
desligar a configuração "Scrollable" (DESMARQUE A CAIXA) para que a tela não role. Isso permitirá
que você faça com que o Canvas preencha toda a tela.

DigitalDoodle: Drawing App - 2

 Adicione um Canvas
Na gaveta Desenho e Animação, arraste um componente Canvas.

Altere a altura (height) e a largura (width) da tela para preencher o pai (fill parent)
Certifique-se de que o componente Canvas esteja selecionado (# 1) para que suas propriedades
apareçam no painel de propriedades (# 2). Na parte inferior, defina a propriedade Height como "Fill
Parent". Faça o mesmo com a propriedade Width.

DigitalDoodle: Drawing App - 3

 Isso é tudo para o Designer! Vá para os blocos.

Acredite ou não, por enquanto esse aplicativo só precisa de um Canvas. Vá para o Editor de Blocos
para programar o aplicativo.

Obtenha um bloco de evento Canvas.Dragged

Na gaveta Canvas1, retire o evento when Canvas1.Dragged.

DigitalDoodle: Drawing App - 4

 Obtenha um bloco de chamada Canvas.DrawLine
Na gaveta Canvas1, retire o bloco do método when Canvas1.DrawLine..

DigitalDoodle: Drawing App - 5

 Use os blocos get e set do bloco Dragged para preencher os valores para o
bloco Draw Line.

O evento Canvas Dragged acontecerá repetidamente muito rapidamente enquanto o usuário arrasta
um dedo na tela. Cada vez que o bloco de evento arrastado é chamado, ele desenhará uma pequena
linha entre a localização anterior (prevX, prevY) do dedo para a nova localização (currentX,
currentY). Passe o mouse sobre os parâmetros do bloco Canvas1.Dragged para retirar os blocos get
de que você precisa. (Passe o mouse sobre eles, não clique neles.)

Teste!

Vá para o dispositivo conectado e arraste o dedo pela tela. Você vê uma linha?

DigitalDoodle: Drawing App - 6

 Ótimo trabalho! Agora estenda este aplicativo
- Aqui estão algumas idéias para estender este aplicativo. Você provavelmente pode pensar em
muitos mais!
- - Mude a cor da tinta (e deixe o usuário escolher a partir de uma seleção de cores). Veja o
tutorial do Paint Pot.
- - Mude o plano de fundo para uma fotografia ou imagem.
- - Deixe o usuário desenhar tanto pontos quanto linhas (dica: use o bloco DrawCircle).

DigitalDoodle: Drawing App - 7

- - Adicione um botão que liga a câmera e permite ao usuário tirar uma foto e, em seguida, rabiscar
nela.

DigitalDoodle: Drawing App - 8