DigitalDoodle:Aplicativo de desenho

Este tutorial lhe mostrará como desenhar uma linha na tela a partir do arrastar dos dedos do usuário.

Inicie um novo projeto

A partir da página Meus projetos, clique em Iniciar Novo Projeto. Se você possui outro projeto aberto, vá para
Meus projetos no menu e escolha Iniciar Novo Projeto.

Nomeie o novo projeto

Chame este projeto de “DigitalDoodle”, ou crie um nome para este aplicativo de desenho.

DigitalDoodle: Aplicativo de desenho - 1

 Ajuste a Tela (Screen) para não permitir que a barra de rolagem apareça

A configuração padrão do App Inventor permite que barras de rolagem apareçam para o objeto Pintura (Screen),
o que significa que o usuário pode ir além dos limites da tela quando desliza o seu dedo sobre a mesma. Quando
você utiliza o objeto Pintura, você precisa desmarcar a opção rolável, localizada no painel de propriedades. Desta
forma, o seu objeto Pintura irá ocupar toda a tela do seu celular.

DigitalDoodle: Aplicativo de desenho - 2

 Adicione um objeto pintura

Na Caixa de Diálogo Desenho e Animação, escolha o componente Pintura clicando sobre o mesmo e arrastando-o
até o componente Screen1.

DigitalDoodle: Aplicativo de desenho - 3

 Mude a Altura e a Largura do objeto Pintura

Tenha certeza de que o objeto Pintura está selecionado (veja a indicação 1 na figura) assim você verá as propriedades
deste objeto apresentadas no painel de Propriedades (indicação 2 na figura). Clique na propriedade Altura e
marque a opção ”Preencher principal”. Faça o mesmo com a propriedade Largura.

Isso é tudo para Designer! Vá até Blocos.

Acredite ou não, agora este aplicativo só precisa de um desenho. Vá para o editor de blocos para programar o
aplicativo.

DigitalDoodle: Aplicativo de desenho - 4

 Selecione o bloco de evento Pintura.Arrastado

Na gaveta Pintura1, arraste o evento quando Pintura1.Arrastado.

DigitalDoodle: Aplicativo de desenho - 5

 Selecione o bloco de chamada Pintura.DesenharLinha

Na gaveta Pintura1, arraste o bloco chamar Pintura1.DesenharLinha.

DigitalDoodle: Aplicativo de desenho - 6

 Utilize os parâmetros de obter e ajustar do bloco arrastado para preencher os valores das linhas de desenho.

O evento Pintura arrastado acontecerá nova e novamente muito rapidamente enquanto o usuário arrasta o dedo
na tela. Cada vez que o bloco de evento Arrastado é chamado, ele desenhará uma pequena linha entre o local
anterior(xAnterior, yAnterior) e a nova localização do dedo(xAtual, yAtual). Passe o mouse sobre os parâmetros
do bloco Pintura1.Arrastado para ver os blocos ”Obter”que são necessários. (Passe o mouse sobre eles, sem clicar.)

DigitalDoodle: Aplicativo de desenho - 7

 Teste seu aplicativo!

Vá até o dispositivo conectado e arraste seu dedo sobre o screen. Você vê uma linha?

Bom trabalho! Agora desenvolva esse aplicativo.

Aqui estão algumas idéias para desenvolver este aplicativo. Você provavelmente pode pensar em muito mais!

- Altere a cor da tinta (e deixe o usuário escolher a partir de uma seleção de cores). Veja o Paint Pot tutorial.

- Altere o plano de fundo para uma fotografia ou imagem.

- Permita que o usuário desenhe pontos, bem como linhas (dica: use o bloco DrawCircle).

- Adicione um botão que ligue a câmera e permita ao usuário tirar uma foto e, em seguida, rabiscar sobre ela.

DigitalDoodle: Aplicativo de desenho - 8