Pràctica 2: Aplicació per a pintar

Seguint els següents passos es podrà crear una aplicació que permetrà pintar amb diferents colors sobre una imatge de fons.

1.- Obre un nou projecte.

2.- Afegeix un botó, canvia-li el nom per “vermell” i el color de fons pel color vermell. (Canvia també el nom a l’apartat de components per “Botó vermell” amb l’opció Rename)

3.- Fes el mateix per als colors blau i verd

4.- Amb els segúents passos es situaran els botons horitzontals:

De l’apartat “ScreenArrangement” arrossega al projecte l’opció “Horitzontal arrangement”, canviali el nom a “Tres Botons” i modifica l’amplada (With) a “fill parent”. Finalment arrossega els tres botons a dins d’aquest recuadre.

NOTA: Amb les opcions Screen Arrangement es fa possible millorar molt la distribució dels elements seleccionats a la pantalla.

 

5.- Introdueix ara, del menú Basic, l’element “Canvas”, modifica-li l’amplada (with) a “fill parent” i l’alçada (height) a 300 pixels . Carrega-li una imatge de fons (Background).

Recorda que ‘aconseguiran millors resultats si la imatge de fons coincideix amb les mides (en pixels) de la pantalla on es treballa.

6.- Finalment introdueix un últim botó, que servirà per a borrar la pantalla. Edital lliurement.

 

7.- Ja hi ha tots el elements necessaris per tal que l’aplicació pugui funcionar. Ara s’han de “programar” amb l’editor de blocks.

8.- Selecciona del Menú “My Blocs” el botó vermell i arrossega a l’editor “When BotoVermell.Click”

9.- De Canvas1 selecciona .PaintColor to i arrossegaho dins del “boto Vermell”:

10.- Del Menú Built-in, apartat de color, selecciona el vermell i posa’l a continuació de Paint color.

11.- Repeteix els passos per als botons verd i blau, amb els colors corresponents.

12.- Arrossega també del boto “Borrar” la opció de “when click” i , del menú canvas1, introdueix-li “call canvas1.clear”

13.- Amb els següents passos s’aconseguirà que, quan es toqui la pantalla hi quedi un punt de color i si s’arrossega el dit, es dibuixi una linia.

Del Menú Canvas1, arrossega l’opció “when Canvas1.touched” i dins d’aquest “call canvas1.drawCircle”

14.- Omple els valor de x i y. Falta ara definir el radi del punt que dibuixara: Selecciona la opció “math” , canvia el valor  per 5 i coloca l’element creat a “call canvas1.drawcircle”

15.- Del Menú Canvas1, arrossega l’opció “when Canvas1.dragged” i dins d’aquest “call canvas1.drawLine”. Omple els blocks per a x1, y1, x2, y2. Situa a x1 el bloc prevX i prevy a y1. Situa a x2 el bloc currentx i currenty a y2.

Aquesta entrada ha esta publicada en App Inventor, AppInventor. Afegeix a les adreces d'interès l'enllaç permanent.

Els comentaris estan tancats.