Fem una foto

En aquest apartat acabarem la nostra primera app tot programant com fer una foto i fent que es vegi a la pantalla.



Més concretament es pretén donar resposta a les preguntes següents:


  • Com podem programar la càmera del mòbil?
  • Com podem veure una imatge a la nostra app?
  • Com podem modificar una imatge?


Per permetre que la nostra app pugui fer fotos hem d'incloure-hi un nou component no visible, el component Camera que trobarem dins de la categoria Media.


Necessitarem, doncs, un botó per fer la foto i el component Image de la categoria User interface on la col·locarem. Aquest component té establertes per defecte les mides vertical i horitzontal automàtiques per tal d'ajustar-se a la mida de la imatge, però les podem canviar si necessitem una mida concreta.



Per programar com fer la foto només cal que quan fem premem el botó corresponent hi hagi una crida a la instrucció TakePicture de la càmera:



A continuació, per col·locar la foto que hem fet dins del component Image que hem hi ha a la nostra app, hem de posar les següents instruccions:



La combinació dels termes set i get permet assignar el valor obtingut amb el get al element que fa referència el set.


Hi ha instruccions que incorporen paràmetres que podem utilitzar en la programació de l'app. En aquest cas és image, que ens permet fer referència a la imatge obtinguda en fer la foto.


Finalment, la foto a la nostra app es veu així:



Modifiquem la imatge

Aquesta foto, tal i com l'hem fet, no es pot modificar. Ara bé, en lloc d'utilitzar el component Image, podem utilitzar un llenç sobre el que puguem pintar a sobre; aquest component és el Canvas que podem trobar a la categoria Drawing and animation.


Així doncs, canviem el component on posem la imatge:



Entre les possibles instruccions que hi ha al Canvas n'hi ha que permeten dibuixar punts o línies. Anem a fer que quan toquem sobre la imatge hi aparegui un punt de color rosa i quan arrosseguem el dit per sobre la imatge hi aparegui una línia de color blau:




Si juguem una estona amb la foto que hem fet podem obtenir un resultat d'aquest tipus a la nostra app:



Per dibuixar un punt hem utilitzat la instrucció DrawPoint, però també podríem utilitzar la instrucció DrawCircle.
Per dibuixar la línia hem utilitzat els paràmetres prevX i prevY, però no els startX ni startY. Per què?


Finalment també podem decidir que aquesta versió modificada de la foto que hem fet ens agrada molt i no la volem perdre. Anem, doncs, a desar-la. Per fer-ho podem utilitzar una d'aquestes dues instruccions del Canvas:



Aquestes dues instruccions desen la imatge al directori arrel del nostre dispositiu i retornen com a text el camí sencer d'on l'estan desant. L'única diferència entre elles és si decidim nosaltres el nom de la imatge o si el decideix el nostre dispositiu mòbil.


Així doncs, necessitem primer definir una variable on assignar aquest text i a continuació fem un botó que, en prémer-lo, desa la imatge que tenim al canvas:



L'ús de variables encara no s'ha explicat, però aquesta opció és prou interessant com per incloure'n una.