TEMA 2 1/20

PotDePintar

Aquest tutorial introdueix el component Canvas per crear gràfics senzills de dues dimensions (2D). Vas a construir PotDePintar, una aplicació que permet a l'usuari dibuixar en la pantalla en diferents colors, i també li permetés portar una imatge ja existent i dibuixar al seu lloc. En una nota històrica, PotDePintar va ser un dels primers programes desenvolupats per demostrar el potencial de les computadores personals, ja en la dècada de 1970. En aquells temps, fer alguna cosa com aquesta aplicació, un simple dibuix, era una tasca molt complexa, i els resultats no van ser massa bons. Però ara, amb App Inventor, qualsevol pot armar una aplicació de dibuix bastant fresca, que és un gran punt de partida per a la creació de jocs 2D.

Amb l'aplicació PotDePintar com es mostra a la Figura 2-1, es pot:

• Submergeixi el seu dit en un pot de pintura virtual per dibuixar en aquest color.

• Arrossegueu el dit per la pantalla per dibuixar una línia.

• Ficar punts a la pantalla.

• Utilitzeu el botó de sota per netejar la pantalla neta.

• Canviar la mida dels punts a gran o petita amb els botons de la part inferior.

• Prengui una fotografia amb la càmera i després dibuixar sobre aquesta imatge.

El que aprendràs

Aquest tutorial introdueix els conceptes següents:

• Utilització del component Canvas per dibuixar.

• Gestió d'esdeveniments tàctils i arrossegueu sobre la superfície del telèfon.

• Control de disseny de la pantalla amb els components Arrangement .

• Ús dels controladors d'esdeveniments que prenen arguments.

• Definició de variables per recordar coses com la mida dels punts que l'usuari ha triat per al dibuix.

Figura 2-1. L'aplicació PotDePintar

TEMA 2 2/20

Introducció

Comproveu que l'ordinador i el telèfon està configurat per utilitzar App Inventor, i aneu a la pàgina web de App Inventor en http://appinventor.mit.edu/. Inicieu un nou projecte a la finestra Dissenyador de components i el nom "PotDePintar". Obriu l'Editor de blocs, feu clic a "Connect to Device" i assegureu-vos que el telèfon s'ha iniciat l'aplicació App Inventor.

Per començar, aneu al tauler Propietats de la dreta del Dissenyador i canviar el títol de la pantalla a "PotDePintar" (no més Screen1 aquí). Heu de veure aquest canvi al telèfon, amb el nou títol apareix a la barra de títol de l'aplicació.

Si estàs preocupat sobre confondre el nom del projecte i el nom de pantalla, no et preocupis! Hi ha tres noms clau del App Inventor:

• El nom escollit per al teu projecte a mesura que hi treballes. Aquest serà també el nom de l'aplicació quan s'empaqueta per al telèfon. Tingueu en compte que pots fer clic a Desa com en el Dissenyador de components per iniciar una nova versió o canviar el nom d'un projecte.

• El nom del component Screen1, que es veurà en el panell que mostra els components de l'aplicació. No es pot canviar aquest nom en la versió actual de l'aplicació Inventor.

• El títol de la pantalla, que és el que veuràs a la barra de títol del telèfon. Això comença sent Screen1, que és el que has utilitzat en HolaGateta. Però es pot canviar, com acabem de fer per PotDePintar.

Disseny dels components

Anem a utilitzar aquests components per fer l'aplicació:

• Tres botons per seleccionar els components de pintura roig, blau i verd. I un component HorizontalArrangement per organitzar-los.

• Un component de botó per netejar el dibuix, i dos per canviar la mida dels punts que es dibuixen.

• Un component Canvas, que és la superfície de dibuix. Canvas té una propietat BackgroundImage, que anem a establir a l'arxiu gateta.png del tutorial HolaGateta en el tema 1. Més endavant en aquest tema, podràs modificar l'aplicació perquè el fons es pot ajustar a una imatge que l'usuari necessita.

TEMA 2 3/20

La creació dels botons de colors

En primer lloc, crear els tres botons de color amb les següents instruccions:

1. Arrossegueu un component Button i canviar el seu atribut de text per "Roig" i fer la seva propietat BackgroundColor a roig.

2. Feu clic a Button1 en la llista de components en el visor per ressaltar (és possible que ja estigui ressaltat) i feu clic a canvia el nom per canviar el nom de Button1 a BotoRoig. Tingueu en compte que no es permeten espais en els noms dels components, de manera que és comú ficar majúscula la primera lletra de cada paraula en el nom.

3. De la mateixa manera, fer dos botons més per al blau i el verd, anomenats BotoBlau i BotoVerd, col·locant sota el botó roig vertical. Revisi el seu treball fins aquest punt i que quede com en la Figura 2-2.

Figura 2-2. El visor mostra els tres botons creats

Tingueu en compte que en aquest projecte estàs canviant els noms dels components en lloc de deixar-los com els noms predeterminats com ho va fer amb HolaGateta. L'ús de noms més significatius fa que els projectes siguin més llegibles, i el que realment t'ajudarà quan et mogues a l'Editor de blocs i ha de fer referència als components pel seu nom. Ací, utilitzarem la convenció de ser el nom del component final amb el seu tipus (per exemple, BotoRoig).

Posa a prova la teva app. Si no has fet clic a "Connect to Device", fes-ho ara i comprova que la teua aplicació es veu al seu telèfon (si està connectat) o en l'emulador.

TEMA 2 4/20

Amb arranjaments per millors dissenys

Ara hauria de tenir tres botons apilades un damunt de l'altre. Però per a aquesta aplicació, vols que estiguen tots alineats un al costat de l'altre a la part superior de la pantalla, com es mostra a la Figura 2-3. Per això, utilitza un component HorizontalArrangement:

1. Des de la categoria de la paleta de Screen Arrangement, arrossegueu un component HorizontalArrangement i poseu sota dels botons.

2. Al tauler Propietats, canviï l'ample de la HorizontalArrangement a "Fill parent" perquè ocupi tot l'ample de la pantalla.

3. Moveu els tres botons, un per un al component HorizontalArrangement.

Nota: Veuràs una línia blava vertical que mostra on la peça que està arrossegant anirà.

Figura 2-3. Els tres botons en una disposició horitzontal

Si ens fixem en la llista dels components del projecte, veuràs els tres botons de sangria en el component de HorizontalArrangement per demostrar que són ara els seus subcomponents. Tingueu en compte que tots els components s'insereixen sota Screen1.

Posa a prova la teva app. També ha de veure els seus tres botons alineats en una fila a la pantalla del telèfon, encara que les coses no es veuen exactament com ho fan en el dissenyador. Per exemple, el contorn al voltant de HorizontalArrangement apareix a la pantalla però no en el telèfon.

En general, s'utilitza la pantalla per crear arranjaments senzills dissenys verticals, horitzontals o tabular. També pot crear dissenys més complexos mitjançant la inserció (o niat) de components de la pantalla ficant uns dins dels altres.

TEMA 2 5/20

Afegir el Canvas

El Canvas és on l'usuari va a dibuixar cercles i línies. Afegir-lo, i afegir l'arxiu de gateta.png de HolaGateta com la BackgroundImage:

1. De categoria bàsica de la paleta, arrossegueu un component Canvas al Visor. Canviar el nom a CanvasPerPintar. Estableixi la seva amplada per "Fill parent". Establiu la seva altura a 300 píxels.

2. Si has completat el tutorial HolaGateta (Tema 1), ja has baixat el fitxer gateta.png.

3. Ajusteu el BackgroundImage de Canvas en el fitxer de gateta.png. A l'editor de propietats, el BackgroundImage s'estableix en “None”. Feu clic al camp “Add to upload” i seleccioneu el fitxer gateta.png.

4. Ajusteu el CanvasPerPintar en color roig perquè quan l'usuari inicia l'aplicació, però no ha fet clic a un botó, els seus dibuixos seran rojos. Reviseu per veure que el que s'ha construït s'assembla a la Figura 2-4.

Figura 2-4. El component Canvas té una imatge de fons (imatge de la gateta)

TEMA 2 6/20

Disposició dels botons inferiors i el component de la càmera

1. En la Paleta, arrossegueu un segon HorizontalArrangement i col·locar-lo sota el Canvas. A continuació, arrossegueu dos components botons més a la pantalla i col·locar-los en aquesta HorizontalArrangement inferior. Canvieu el nom del primer botó a BotoFerFoto i la seva propietat Text en "Fer Foto". Canvieu el nom del segon botó per BotoNetejar i la seva propietat Text en "Netejar".

2. Arrossegueu dos components botons més de la paleta en l'HorizontalArrangement, col·locant al costat de BotoNetejar.

3. Anomena els botons BotoGran i BotoXicotet, i posa el seu text a "PGran" i els "PXicotet", respectivament.

4. Des de la paleta Media, arrossegar un component de la càmera a la pantalla. Apareixerà a l'àrea del component no visible.

Ara has completat els passos per configurar l'aparença de l'aplicació, com es mostra en Figura 2-5.

Figura 2-5. La interfície d'usuari per PotDePintar

TEMA 2 7/20

Posa a prova la teva app. Comprovar l'aplicació al telèfon. La imatge de la gateta apareix ara a la fila superior de botons? La fila inferior de botons apareix?

Afegir comportaments als Components

El següent pas consisteix a definir com es comporten els components. Al dissenyador, ha afegit un component Canvas anomenat CanvasPerPintar. Igual que tots els components del Canvas, CanvasPerPintar té un esdeveniment Touched i un esdeveniment Dragged. Vas a programar l'esdeveniment CanvasPerPintar.Touched perquè cridi CanvasPerPintar.DrawCircle. Vas a programar l'esdeveniment CanvasPerPintar.Dragged que crida a CanvasPerPintar.DrawLine. A continuació, programar els botons per establir la propietat CanvasPerPintar.PaintColor, netegeu el CanvasPerPintar, i canviar el BackgroundImage a una imatge presa amb la càmera.

Afegeix l'esdeveniment tàctil per dibuixar un punt

En primer lloc, podràs arreglar les coses de manera que en tocar el CanvasPerPintar, es dibuixa un punt en el lloc que has tocat:

1. En l'Editor de blocs, feu clic a My Blocs, seleccioneu el calaix per als CanvasPerPintar i arrossegueu el bloc CanvasPerPintar.Touched a l'àrea de treball. Així que s'arrossega el bloc cap a fora, els tres taps en el costat dret s'ompliran automàticament amb blocs de noms per x, y, i touchedSprite, com es mostra a la Figura 2-6.

Figura 2-6. L'esdeveniment inclou informació sobre on es toca la pantalla

Nota. Si has completat l'aplicació HolaGateta en el tema 1, estàs familiaritzat amb els esdeveniments Button.Click, però no amb els esdeveniments de Canvas. Els esdeveniments Button.Click són bastant simples perquè no hi ha res de saber sobre l'esdeveniment a part d'això que va succeir. Alguns controladors d'esdeveniments, però, vénen amb informació sobre l'esdeveniment denominat arguments. L'esdeveniment CanvasPerPintar.Touched li indica les coordenades X i Y del tacte en el Canvas. També li indica si un objecte dins dels CanvasPerPintar (en App Inventor, això es diu un sprite) va ser tocat, però no ho necessitarem fins al tema 3. Les coordenades X i Y són els arguments que utilitzarem per observar quan l'usuari toca la pantalla, de manera que es pot dir el punt en aquesta posició.

TEMA 2 8/20

2. Arrossegueu una ordre CanvasPerPintar.DrawCircle del calaix CanvasPerPintar i col·locar dins del controlador d'esdeveniments CanvasPerPintar.Touched, com es mostra a la Figura 2-7.

Figura 2-7. Quan l'usuari toca el Canvas, l'aplicació dibuixa un cercle

A la part dreta del bloc CanvasPerPintar.DrawCircle, veuràs tres ranures per als arguments que hem d'omplir: x, y i r. Els arguments x i y especifiquen la ubicació on es deu dibuixar el cercle, i r determina el radi (o grandària) del cercle. El quadre d'advertència de color groc amb el signe d'exclamació a la part superior del controlador d'esdeveniments CanvasPerPintar.Touched denota que aquests espais encara no han estat cobertes. Anem a construir els blocs per a seguir.

Aquest controlador d'esdeveniments pot ser una mica confús ja que l'esdeveniment CanvasPerPintar.Touched també té ranures x i y, només tenir en compte que la x i y per a l'esdeveniment CanvasPerPintar.Touched diu on l'usuari toca, mentre que la x i y per a l'esdeveniment CanvasPerPintar.DrawCircle són ranures obertes per especificar que el cercle ha de ser dibuixat.

Com que vols dibuixar el cercle on l'usuari toca, connecta els valors de x i y de CanvasPerPintar.Touched com els valors dels paràmetres x i y en CanvasPerPintar.DrawCircle.

Nota. No guarda els arguments de l'esdeveniment Touched directament, tot i que això pot semblar lògic! En el seu lloc, pren aquests valors del calaix My Definitions, com es mostra a la Figura 2-8.

Figura 2-8. El sistema ha afegit referències als arguments de l'esdeveniment touchedSprite, y i x

TEMA 2 9/20

3. Obriu el calaix My Definitions en My Blocks i trobaràs els blocs de valor de x i el de valor y.

Els blocs es creen automàticament per App Inventor en arrossegar el bloc de control d'esdeveniments CanvasPerPintar.Touched: són les referències als arguments x i y (o noms) d'aquest esdeveniment. Arrossega els blocs de valors x i y, i connecta-los als terminals corresponents al bloc CanvasPerPintar.DrawCircle pel que s'assemblen al que es mostra a la Figura 2-9.

Figura 2-9. L'aplicació sap on traçar (x, y), però encara hem d'especificar la mida del cercle

4. També hauràs d'especificar el radi, r, del cercle per dibuixar. El radi es mesura en píxels, que és el més petit de punts que es pot dibuixar a la pantalla. Per ara, ajusteu a 5: feu clic a una àrea en blanc de la pantalla perquè aparegui el menú de context i, a continuació, seleccioneu la carpeta de matemàtiques. Seleccioneu 123 de la llista desplegable per crear un bloc de nombres. Canvieu de 123 a 5 i que ho fiqueu a la ranura per r. Quan ho faci, el quadre groc a la cantonada superior esquerra desapareixerà ja que totes les ranures estan plenes. La Figura 2-10 il·lustra com quedarà el gestor d'esdeveniment final CanvasPerPintar.Touched.

Nota. Tingueu en compte que podria haver creat el Bloc número 5 simplement escrivint un 5 en l'Editor de blocs, seguit de Retorn. Aquest és un exemple de typeblocking: si comença a escriure, l'Editor de blocs mostra una llista dels blocs amb un nom amb el que està escrivint, si escriu un nombre, es crea un bloc de nombres.

TEMA 2 10/20

Figura 2-10. Quan l'usuari toca el canvas, un cercle de radi 5 es dibuixarà a (x, y)

Posa a prova la teva app. Proveu el que tenim fins ara al telèfon. Toqueu en el dit el Canvas deixant un punt a cada lloc que toca. Els punts serà de color roig si s'estableix la propietat CanvasPerPintar.PaintColor a roig en el Dissenyador de components (en

cas contrari, és negre, ja que és el predeterminat).

TEMA 2 11/20

Afegeix l'esdeveniment d'arrossegament que dibuixa una línia

A continuació, anem a afegir el controlador d'esdeveniments d'arrossegament. Aquí està la diferència entre un contacte i arrossegueu-lo a:

• Un toc és quan poseu el dit al canvas i aixequeu sense moure'l.

• Una arrossegament és quan poseu el dit al canvas i el moeu mentre el manteniu en contacte amb la pantalla.

En un programa de dibuix, arrossegant el dit per la pantalla sembla traçar una línia gegant, corbes al llarg de la trajectòria del dit. El que estàs fent és atraient a centenars de petites línies rectes, cada vegada que es mou el dit, encara que sigui una mica, és estendre la línia des de l'última posició del seu dit a la seva nova posició.

1. Del calaix CanvasPerPintar, arrossegueu el bloc CanvasPerPintar.Dragged a l'àrea de treball. Heu de veure el controlador d'esdeveniments com es mostra a la Figura 2-11.

L'esdeveniment CanvasPerPintar.Dragged ve amb set arguments:

startx, starty

La posició del seu dit cap enrere, on l'arrossegament comença.

currentx, currenty

La posició actual del seu dit.

prevx, prevy

La posició immediatament anterior del seu dit.

draggedSprite

L'argument que serà true si l'usuari arrossega directament sobre un sprite imatge.

Figura 2-11. Un esdeveniment Dragged té encara més arguments que Touched

TEMA 2 12/20

2. Des del calaix CanvasPerPintar, arrossegueu del bloc CanvasPerPintar.DrawLine al bloc CanvasPerPintar.Dragged, com es mostra en la figura 2-12.

Figura 2-12. Afegir la capacitat per dibuixar línies

El bloc CanvasPerPintar.DrawLine té quatre arguments, dos per cada punt que determina la línia: (x1, y1) és un punt, mentre que (x2, y2) és l'altre. Es pot saber quins valors s'han d'unir en cada argument? Recordeu, l'esdeveniment Dragged es cridat moltes vegades a mesura que arrossegueu el dit a través del canvas: l'aplicació dibuixa una línia petita cada vegada que el seu dit es mou, de (prevx, prevy) per (currentX, currentY). Anem a afegir aquells al nostre bloc CanvasPerPintar.DrawLine.

3. Feu clic al calaix de My Definitions. Heu de veure als blocs per als arguments que necessita. Arrossegueu els blocs de valors corresponents a les ranures corresponents a CanvasPerPintar.Dragged. prevX i prevY han de ser connectats a les ranures x1 i y1. currentX i currentY han de ser connectats a les ranures x2 i y2, com es mostra a la Figura 2-13.

TEMA 2 13/20

Figura 2-13. A mesura que l'usuari arrossega, l'aplicació va a dibuixar una línia des del punt anterior a l'actual

Posa a prova la teva app. Proveu aquest comportament al telèfon: arrossegar el dit per la pantalla per dibuixar línies i corbes. Toqueu la pantalla per fer punts.

TEMA 2 14/20

Afegeix controladors d'esdeveniments de botons

L'aplicació que s'ha construït permet a l'usuari dibuixar, però sempre es dibuixa en roig. A continuació, afegiu controladors d'esdeveniments per als botons de colors perquè els usuaris puguen canviar el color de la pintura, i un altre per BotoNetejar perquè puguen esborrar la pantalla i tornar a començar.

En l'Editor de blocs:

1. Canvieu a la columna My Blocks.

2. Obriu el calaix per BotoRoig i arrossegueu el bloc BotoRoig.Click.

3. Obriu el calaix CanvasPerPintar. Arrossega la CanvasPerPintar.PaintColor configurat per bloquejar (és possible que hagi de desplaçar-se per la llista de blocs al calaix per trobar-lo) i posar en el "do" de BotoRoig.Click.

4. Canvieu a la columna Built-In. Obriu el calaix Colors i arrossegueu el bloc per al color roig i connecteu-lo al CanvasPerPintar.PaintColor configurat per bloquejar.

5. Repetiu els passos 2-4 per als botons de color blau i verd.

6. L'últim botó per a crear és BotoNetejar. Canvieu de nou a la columna My Blocks i arrossegueu un BotoNetejar.Click del calaix BotoNetejar. Del calaix CanvasPerPintar, arrossegueu CanvasPerPintar.Clear i el col·loqueu en el bloc BotoNetejar.Click. Assegureu-vos que els blocs es mostren com ho fan a la Figura 2-14.

Figura 2-14. En fer clic als botons de color canvia el PaintColor del CanvasPerPintar, feu clic en BotoNetejar per a esborrar la pantalla.

TEMA 2 15/20

Permetre que l'usuari prengui una fotografia

Les aplicacions d'App Inventor poden interactuar amb les potents funcions d'un dispositiu Android, incloent la càmera. Per donar-li vida a l'aplicació, deixarem que l'usuari estableixi el fons del dibuix a una imatge que es pren amb la càmera.

1. El component de la càmera té dos blocs principals. El bloc Camera.TakePicture llança l'aplicació de la càmera en el dispositiu. L'esdeveniment Camera.AfterPicture s'activa quan l'usuari ha acabat de fer la fotografia. Anem a afegir blocs al controlador d'esdeveniments Camera.AfterPicture per ajustar la imatge CanvasPerPintar.Background a la foto feta recentment a la columna My Blocks i obrir el calaix BotoFerFoto. Arrossegueu el controlador d'esdeveniments BotoFerFoto.Click a l'àrea de treball.

2. De Camera1, arrossegueu Camera1.TakePicture i poseu en el controlador d'esdeveniments BotoFerFoto.click.

3. De Camera1, arrossegueu el controlador d'esdeveniments Camera1.AfterPicture a l'àrea de treball.

4. De CanvasPerPintar, arrossegueu el bloc set CanvasPerPintar.BackgroundImage to i el col·locqueu al controlador d'esdeveniments Camera1.AfterPicture.

5. Camera1.AfterPicture té un argument amb nom d'imatge, que és la imatge que acaba de prendre. Pots obtenir una referència a la mateixa, la imatge de valor, en la paleta My Definitions, arrossegueu fora i connectar-lo a CanvasPerPintar.BackgroundImage.

Els blocs han de ser similar a la Figura 2-15.

Figura 2-15. Quan es pren la fotografia, s'estableix com a imatge de fons del canvas

Posa a prova la teva app. Prova aquest comportament, feu clic a Prendre Foto al telèfon i fer una foto. La gateta serà canviada per la imatge presa, i llavors es pot recórrer a aquesta imatge. (Figura 2-16.)

TEMA 2 16/20

Canviar la mida del punt

La mida dels punts dibuixats en el canvas es determina en la cridada a CanvasPerPintar.DrawCircle quan l'argument del radi r s'estableix en 5. Per canviar el gruix, es pot posar en un valor diferent per r. Per provar això, proveu de canviar el 5 a un 10 i mireu-ho al telèfon per veure com es veu.

La grandària prefixada que troba en l'argument de ràdio és l'única mida que l'usuari pot utilitzar. I si es vol canviar la mida dels punts? Anem a modificar el programa perquè l'usuari no només el programador, pot canviar la mida dels punts. Anem a canviar de manera que quan l'usuari fa clic a un botó anomenat "PGran", la mida dels punts és 8, i quan es fa clic en un botó anomenat "PXicotet", és 2.

Per utilitzar diferents valors per l'argument de ràdio, l'aplicació ha de saber quin volem aplicar. Hem de dir-li que usi un valor específic, i ha d'emmagatzemar (o recordar) el valor d'alguna manera perquè pugui seguir utilitzant-lo. Quan la seva aplicació ha de recordar alguna cosa que no és una propietat, es pot definir una variable. Una variable és una cel·la de memòria, es pot pensar en ella com una galleda on pot emmagatzemar dades que poden variar, com la mida del punt actual.

Comencem definint una mida de gota variable:

1. En l'Editor de blocs, obriu el calaix Definition a la columna Built-In. Arrossega un bloc def variable. Canvieu el text "variable" a "MidaGota".

2. Observeu que el bloc def MidaGota té una ranura oberta. Aquí és on pots especificar el valor inicial de la variable, o el valor que pren per omissió quan l'aplicació comença. (Això es refereix sovint com "inicialitzant una variable" en termes de programació). Per aquesta aplicació, per inicialitzar la MidaGota a 2 mitjançant la creació d'un nombre de bloc 2 (ja sigui per començar a escriure el número 2 o arrossegant un bloc número 123 del calaix Matemàtiques) i connectar-lo a def MidaGota, com es mostra a la Figura 2-17.

Figura 2-17. Inicialitzar la variable MidaGota amb un valor de 2

Figura 2-16. L'aplicació PotDePintar

TEMA 2 17/20

L'ús de variables

A continuació, volem canviar l'argument de CanvasPerPintar.DrawCircle al controlador d'esdeveniments CanvasPerPintar.Touched perquè utilitzi el valor de mida de punt en lloc d'utilitzar sempre un nombre fix. (Pot semblar que hem "fixat" MidaGota per al valor 2 perquè el inicialitza d'aquesta manera, però ara veuràs com podem canviar el valor de MidaGota i per tant canviar la mida del punt que es veu arrossegat.)

1. En l'Editor de blocs, canviar a la columna My Blocks i obrir el calaix de My Definitions. D'haver-hi dos nous blocs: (1) un bloc de global MidaGota que proporciona el valor de la variable, i (2) un bloc set MidaGota global per a que estableix la variable a un valor nou. Aquests blocs van ser generats automàticament en crear la variable de mida del punt, de la mateixa manera que el valor dels blocs per als arguments x i y van ser creats afegint el controlador d'esdeveniments CanvasPerPintar.Touched abans.

2. Anar al controlador d'esdeveniments CanvasPerPintar.Touched i arrossegueu el bloc número 5 de la ranura r i posar-lo a les escombraries. Després reemplaçar amb el bloc de global MidaGota des del calaix de My Definitions (vegeu la Figura 2-18). Quan l'usuari toca el canvas, l'aplicació ara determinara el radi de la variable MidaGota.

Figura 2-18. Ara, la mida de cada cercle depèn del que s'emmagatzema en la variable MidaGota

TEMA 2 18/20

Canvi dels valors de les variables

Aquí és on la màgia de les variables realment entra en joc. La mida de punt variable permet a l'usuari triar la mida del cercle, i el controlador d'esdeveniments dibuixarà el cercle corresponent. Anem a implementar aquest comportament mitjançant la programació de la BotoXicotet.Click i controladors d'esdeveniments BotoGran.Click:

1. Arrossegueu un controlador d'esdeveniments BotoXicotet.Click del calaix BotoXicotet de My Blocks. A continuació, arrossegueu un bloc set global MidaGota de My definitions i connectar-lo a BotoXicotet.Click. Finalment, creeu un bloc número 2 i connecteu-en al bloc set global MidaGota.

2. Feu un controlador d'esdeveniments similars per BotoGran.Click, però estableixi mida de gota a 8. Tant els controladors d'esdeveniments ara han d'aparèixer en l'Editor de Blocs, com es mostra a la Figura 2-19.

Nota. El "global" en el set global MidaGota es refereix al fet que la variable pot ser utilitzat en tots els controladors d'esdeveniments del programa (a nivell mundial). Alguns llenguatges de programació permeten definir variables que són "local" a una part específica del programa; App Inventor actualment no ho fa.

Figura 2-19. En fer clic als botons canvia la MidaGota, tocs successius es basarà en aquesta grandària

Posa a prova la teva app. Intenteu fer clic als botons de mida i després es toca el Canvas. Estan els cercles dibuixats amb diferents mides? Són les línies?

La mida de la línia no ha de canviar perquè has programat que MidaGota només s'utilitza en el bloc CanvasPerPintar.DrawCircle. Basat en això, pots pensar en com li agradaria canviar els blocs de manera que els usuaris poden canviar la mida de la línia també? (Tingueu en compte que Canvas té una propietat anomenada LineWidth.)

TEMA 2 19/20

L'aplicació completa: PotDePintar

Figura 2-20 il·lustra la nostra aplicació completa PotDePintar.

Figura 2-20. L'últim conjunt de blocs per PotDePintar

Variacions

Aquí hi ha algunes variacions que pots explorar:

• La interfície de l'aplicació d'usuari no proporciona molta informació sobre els ajustaments actuals (per exemple, l'única manera de saber la MidaGota actual o el color és dibuixar alguna cosa). Modifiqueu l'aplicació perquè aquests ajustos es mostren a l'usuari.

• Permeti que l'usuari introdueixi la mida dels punts dins d'un component TextBox. D'aquesta manera, es pot canviar a altres valors, a més de 2 i 8.

TEMA 2 20/20

Resum

Aquestes són algunes de les idees que hem tractat en aquest tema:

• El component Canvas permet dibuixar sobre ella. També pot sentir tocs i arrossegaments, i es pot assignar aquesta àrea a funcions de dibuix.

• Pot utilitzar els components disposició de pantalla per organitzar el disseny de components en comptes de col·locar un sota l'altre.

• Alguns controladors d'esdeveniments tenen informació sobre l'esdeveniment, com ara les coordenades d'on la pantalla es va tocar. Aquesta informació es representa mitjançant arguments. Quan s'arrossega per un controlador d'esdeveniments que té arguments, App Inventor crea blocs de valor per a ells i els col·loca al calaix de My Definitions.

• Crear variables mitjançant l'ús de blocs de definició de variables del calaix Definicions.

• Les variables permeten l'aplicació de recordar la informació, com la MidaGota, que no s'emmagatzema en una propietat de component.

• Per a cada variable que es defineix, App Inventor proporciona automàticament un bloc global value que dóna el valor de la variable, i un bloc set global variable per canviar el valor de la variable. Aquests blocs es poden trobar al calaix de My Definitions.

En aquest tema es va mostrar com el component Canvas es pot utilitzar per a un programa de pintura. També es pot utilitzar per a programes d'animacions, com els que trobaries en els jocs 2D.