App - Paint Pot (Lata de tinta)

Transcrição

1 App - Paint Pot (Lata de tinta) Vamos construir um aplicativo de pintura. Se você ainda não tem uma Screen (Tela) para o PaintPot, vá em frente e adicione uma. (Caso preferir, para este exemplo, você pode nomeála como PaintPot mesmo.) Clique em Add Screen... Digite um nome para a sua tela; Que tipo de características você deve atentar-se ao construir um app de pintura? - Desenho de linhas e pontos com o dedo - Apagar a tela - Escolha de cores - Cores Personalizadas - Algo mais? Configurando a tela para desenhar Vamos começar com a parte mais importante: a tela de desenho! Para conseguirmos desenhar em nossa tela, nesse caso, precisaremos de um componente chamado Canvas, pois é em cima dele que iremos conseguir desenhar. Na guia Designer, na primeira coluna Palette (Paleta), localize Drawing and Animation (Desenho e Animação) e selecione o componente Canvas - arraste-o para o Viewer (visualizador). Depois de ter feito isso, clique em Canvas na coluna Components (componentes). Dê uma olhada na coluna Properties (Propriedades) e altere a Width (Largura) e Height (Altura) da tela para "Fill Parent". Permitir desenhar na tela inteira do app Novamente, na coluna Components (Componentes) clique em PaintPot (tela que você criou), há uma opção de rolagem de tela na coluna Properties (Propriedades) denominada Scrollable basta desmarcar a caixa de seleção dela.

2 O que acontece com o Canvas uma vez que você desmarque a caixa? Desenhando em Canvas Mude para a guia Blocks (blocos) para podermos adicionar os blocos que nos permitam desenhar em Canvas (que será usada como nossa tela para desenhar no app). Linhas de desenho Se você arrastar o dedo lentamente ao longo da tela, ele desenha uma linha. Mas para isso realmente ocorrer, vamos dar uma olhada nos blocos disponíveis para o componente Canvas. Ao clicar na guia Blocks, selecione a opção Canvas1 ao lado esquerdo, haverão vários blocos para essa opção, escolha um manipulador de eventos clicando nele. Nesse caso, como precisamos iniciar das posições X e Y, e faze-las funcionarem bem ao arrastarmos o dedo desenhando sobre Canvas, devemos escolher o primeiro bloco marrom (when Canvas1.Dragged).

3 Vamos ver os procedimentos de Canvas que pode nos ajudar Esse procedimento mostrado na figura ao lado é o.drawline (linha de desenho) (call Canvas1.DrawLine). Quando você arrastar o seu dedo sobre a tela, irá aparecer uma linha e conforme você for arrastando irão aparecendo centenas de linhas. Uma vez que as linhas interligam-se, elas irão curvando-se em qualquer direção que você arrastar o dedo. O bloco de procedimento.drawline possui quatro entradas: x1, y1, x2 e y2. x1 e y1 são as posições X e Y para o primeiro ponto da linha, e x2 e y2 são as posições para o segundo ponto da linha. O manipulador de eventos.dragged (arrastado) (when Canvas1.Dragged) contém os valores para onde o dedo começa a ser arrastado, e como o dedo começa a ser arrastado em Coordenadas X e Y, teremos de utilizar Variables (variáveis) localizadas ao lado esquerdo clique e selecione quatro blocos get, para as quatro entradas. Ao encaixar um bloco no outro, adapte os blocos get com os valores do manipulador de eventos.dragged. Conforme mostra a imagem abaixo. Teste o seu app! Lembre-se das regras de codificação: salvar muitas vezes e testar muitas vezes! Experimente seus blocos montados e veja como eles trabalham.

4 Construindo pontos Quando você toca em Canvas (tela de desenho do app), você automaticamente tem um ponto no local onde você toca. Vamos dar uma olhada nos blocos disponíveis novamente. Na guia Blocks, no componente Canvas1, há um manipulador de eventos denominado.touched (when Canvas1.Touched) que podemos usar. No topo do manipulador de eventos, você vê x, y e touchedsprite. Os valores X e Y não nos dizem onde a tela foi tocada. Então, qual o procedimento que precisamos usar com este manipulador de eventos para desenhar alguns pontos? Para este evento de toque, faça a tela desenhar um pequeno círculo no ponto de coordenadas (x, y). Há um bloco.drawcircle (call Canvas1.DrawCircle) que podemos usar para esse caso. Nesse bloco temos três entradas, onde você deve especificar valores para as coordenadas x e y onde o círculo deve ser elaborado, e r que é o raio do círculo que deve conter o valor 5 (geralmente funciona muito bem nessa situação). Para x e y, você pode usar os valores a partir do manipulador de eventos.touched Como você pode montar os blocos mostrados à direita? Primeiramente, encaixe o bloco.drawcircle (roxo) dentro do bloco.touched (marrom), depois clique em Variables (variáveis) ao lado esquerdo e selecione dois blocos get. E agora, para conseguirmos alterar o nosso r (raio do círculo), clique em Math também ao lado esquerdo e selecione o primeiro bloco azul com o número 0. Feito isso, encaixe-os nos soquetes do bloco roxo. E altere respectivamente para x, y e 5.

5 Visão dos blocos montados Teste o seu app! Veja se você pode desenhar pontos e linhas. Você é capaz de apagar toda a tela? Vamos adicionar esse recurso agora! Apagar a tela Clique na guia Designer e procure a seção Sensors (sensores) ao lado esquerdo. Você vai encontrar um componente chamado AccelerometerSensor Sensores de acelerômetro estão em todos os smartphones, são aplicações que funcionam quando o telefone está em movimento ou quando for sacudido. Clique e arraste-o para o Viewer (visualizador). Pronto! Você acabou de colocar o acelerômetro na tela.

6 Em seguida, mude de volta para a guia Blocks (blocos). Clique em AccelerometerSensor1 para poder ver que tipo de manipuladores de eventos temos disponíveis. Há um manipulador de evento de Shaking (sacudir) (when AccelerometerSensor1.Shaking) que podemos usar. Quando o acelerômetro detecta que o telefone está balançando, podemos chamar um procedimento para apagar a tela. Para isso, clique em Canvas1 ao lado esquerdo e selecione o procedimento Clear (limpar) (call Canvas1.Clear). Isto irá limpar/apagar tudo o que estiver desenhado em Canvas (componente utilizado como a tela de desenho no app). Teste o seu app! Coloque esses dois blocos Shaking (sacudir) e Clear (limpar) juntos e veja se funciona. Basta encaixar o bloco roxo dentro do bloco marrom. Configurar a Seleção de Cores Até agora, temos apenas a cor preta. Vamos adicionar uma maneira de alterar a cor da tinta. Na guia Designer, clique em User Interface (interface de usuário) localizado na coluna Pallete (paleta) em seguida, clique e arraste o Button (botão) para o Viewer (visualizador). E teremos um botão para selecionar, por exemplo, tinta vermelha. Feito isso, basta alterar na coluna Properties (propriedades) o Text (texto) do botão para "Vermelho" e alterar a cor de seu BackgroundColor para vermelho também.

7 Em seguida, clique em Button1 na lista de Components (componentes) E clique no botão Rename (Renomear) para mudar o nome de Button1 para BotãoVermelho. Observe o seu botão mudar no Viewer (dependendo da cor/nome que você escolher para ele). Agora, vamos fazer isto realmente funcionar de uma forma prática! Dispensando códigos e utilizando a parte visual novamente; Mude para a exibição de Blocks (blocos). Clique no seu botão ao lado esquerdo, nesse exemplo, trocamos o nome dele para BotãoVermelho, depois selecione o bloco marrom (when BotãoVermelho.Click) Em seguida, clique novamente no seu botão e selecione o bloco verde (BotãoVermelho. BackgroundColor). E por último, clique em Canvas1, e selecione o botão verde (set Canvas1.PaintColor to) Pronto! Basta encaixar estes blocos e você terá seu botão funcionando. Você também pode definir a cor da pintura da tela, já que é uma Propertie (propriedade). Assim como também pode recuperar/alterar a cor de fundo do botão da mesma forma (lá na guia Designer). Teste o seu botão! Veja se ele muda a cor conforme o esperado.

8 Explore um pouco mais Agora que você sabe como mudar a cor da tinta, aproveite para adicionar mais botões! Experimente os componentes arranjo de tela para manter as coisas organizadas na tela. Você também pode programar uma maneira para que o usuário altere o tamanho dos pontos e crie cores personalizadas.