1. 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.
Figura 2-1. L'aplicació PotDePintar
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.
2. 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.
3. 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.
4. 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.
5. 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)
6. 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
7. 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ó.
8. 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
9. 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.
10. 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).
11. 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
12. 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.
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.
14. 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.
15. 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.)
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
Figura 2-16. L'aplicació
PotDePintar
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
17. 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
18. 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.)
19. 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.
20. 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.
