Appinventor , lata de tinta

---

Botão da camada “canvas” a e limpar

Os dois ultimos componentes são camadas “Canvas” e Limpar “wipe”

1. A partir da paleta de Desenho e da categoria Animação arraste um componente Canvas para o Viewer. Mude seu nome para "DrawingCanvas". Defina sua largura para " Fill Parent” e defina sua altura para 300 pixels.
2. Adicione uma imagem de fundo para a tela. Clique no campo que contém "None ..." ao lado “BackgroundImage” no painel de propriedades do “canvas”. Você pode usar o mesmo arquivo kitty.png, se você ainda o tê-lo do tutorial anterior. Ou você pode usar outra imagem.
   
   From the Palette, drag the final button onto the screen, placing it under the canvas. Rename this button component to "ButtonWipe" and change its Text attribute to "Wipe".
3. Da paleta, arraste o último botão na tela, colocando-o sob a “canvas”. Renomeie este botão para "ButtonWipe" e alterar o seu texto do atributo para "wipe" ou “limpar”.

You've now completed the steps to set the appearance of your app. Here's how this should look in the Designer. Next, you'll define how the components behave.

Agora você já concluiu as etapas para definir a aparência do seu app. Veja como seu design deve aparentar. Em seguida, você vai definir a forma como os componentes se comportam.

[pic 1]

Adicionar Manipuladores de Evento de Butão

No Bloco de Edição

1. Abra a aba para ButtonRed e arraste  o bloco when ButtonRed.Click (
   
2. Abra o “DrawingCanvas” e arraste para for a o bloco set DrawingCanvas.PaintColor to  .  (lembre-se que o conjunto de componentes bloco  é uma lista suspensa, portanto selecione o PaintColor na lista) e o coloque no  do  da seleção when ButtonWipe.Click .

[pic 2](Encontre o DrawingCanvas.BackgroundColor)

[pic 3]

(Mude para PaintColor)

1. Abra a gaveta Cores e arraste o bloco para a cor vermelha e coloque a em  set DrawingCanvas.PaintColor to .  (Clique em um bloco de cor depois de ter sido colocado irá exibir uma tabela de cores que você pode escolher.).
2. Repita os passos 2-4 para os botões azuis e verdes.

[pic 4]

O ultimo Butão a ser configurado é o Butão de limpeza “Wipe” , Crie um evento de click para o “ButtonWipe” arrastando  when ButtonWipe.Click   do ButtonWipe . Do DrawingCanvas arraste o componente  call DrawingCanvas.Clear   e o coloque no  do   when ButtonWipe.Click  como no exemplo abaixo.

 [pic 5]

Adicionando Evento de Touch

Agora, para o próximo passo: desenhe sobre a tela. Você vai organizar as coisas de modo que quando você toca na tela, você tem um ponto no local onde você toca. Se você arrastar o dedo lentamente ao longo da tela, ele desenha uma linha.

No Editor de Blocos, abrir a gaveta para a tela e arrastar o bloco   when DrawingCanvas.Touched . Assim que você arrastar o bloco para fora, você pode observar três nomes de argumento (destacado em laranja), localizado na parte superior do bloco x, y, e touchedSprite. Estes argumentos são também conhecidos como variáveis locais e pode se acessado usando o  get  ou set  encontrado na gaveta Variáveis e selecionando a variável adequada no menu. Você também pode acessar essas variáveis, movendo o cursor sobre o nome em destaque e selecionando a variável que você gostaria de usar.

Você já viu os eventos clique de botão. Os cliques são simples, porque não há nada diferente a saber sobre o clique. Para o evento when ... Touched   , os dois primeiros argumentos representam as coordenadas x e y de onde o toque aconteceu. Vamos guardar touchedSprite para o próximo tutorial.

Para este evento de toque, faça a tela desenhar um pequeno círculo no ponto de coordenadas (x, y). Arraste o comando call DrawingCanvas.DrawCircle  da gaveta tela e o coloque em  do  da seção  when DrawingCanvas.Touched.

No lado direito do comando call DrawingCanvas do tem três soquetes, onde você deve especificar valores para as coordenadas x e y onde o círculo devem ser elaborados, e r, que é o raio do círculo. Para x e y, você vai usar valores dos argumentos que foram fornecidos para o manipulador de toque:

1. Mova o cursor sobre a variável x (destacado em laranja). Encontre o bloco get x e arraste-o na tomada x correspondente do bloco when DrawingCanvas.Touched .
2. Faça o mesmo para a variável Y.
3. Você também vai precisar especificar o raio do círculo. Cinco (pixels) é um bom valor para este app. Clique em uma área vazia da tela e digite o número 5 seguido de enter para criar um bloco de número com um valor de 5. Digitar sobre a área em branco da tela é chamado “typeblocking” e é um atalho útil. Isto pode ser feito por qualquer bloco, não apenas números. Conecte o bloco “5” no raio.

O evento de Toque deve ser como  o exemplo a seguir:

[pic 6]

Teste o que você tem até agora no telefone. Toque em um botão de cor. Agora toque na tela, e seu dedo deve deixar uma mancha em cada lugar que você tocar. Toque no botão “Wipe”, deve limpar seu desenho.