App_Canvas_caricare_e_sostituire_immagine

Canvas (tela), è un pannello bidimensionale sensibile al tocco, è anche un contenitore d'immagine su cui è possibile disegnare e muovere i componenti Ball e ImageSprite.
Del Canvas possono essere definite diverse proprietà, fra le quali:

  • BackgroundColor (colore di fondo)
  • PaintColor (Colore/i con i quali viene disegnato sullo sfondo)
  • BackgroundImage (immagine di fondo)
  • Width e Height, larghezza ed altezza come numero positivo in pixel.

Le dimensioni massime sono 300 x 320 pixel.
Il file grafici utilizzabili nel Canvas possono essere *.jpg, *.png o *.gif
Ogni punto interno alla tela è definito da una coppia di X,Y, dove
X è il numero di pixel di distanza dal bordo sinistro.
Y è il numero di pixel di distanza dal bordo superiore.
Il componente Canvas non lavora da solo a meno che non si voglia presentare un’immagine od un rettangolo sul display facendolo rimanere in primo piano senza fare altro.
Questa app è composta da una Canvas e due Button. Viene mostrato come caricare un immagine dalla pagina Design e poi come, utilizzando la programmazione, sostituirla con un’altra.

Componenti e proprietà da assegnare:

Componente

Gruppo

Nome

Proprietà

Text

Width

Height

BackgroundImage

Canvas

Basic

Canvas1

300

320

Cane.png

Horizz.

ScreenArr.

Automatic

Button

Basic

Bcane

Cane

Automatic

Button

Basic

Bgatto

Gatto

Automatic

300

320

Gatto.png

Come dovrebbero presentarsi la pagina Design e l’Emulatore:
Come e da dove inserire le immagini Cane.png e Gatto.png
Il file Cane.png è l’immagine che sarà vista all’avvio dell’applicazione.
Per questa ragione va inserito nella proprietà BackgroundImage di canvas1.
Fare click sul testo None sotto BackgroundImage e dalla finestra che si apre, fare click su Add.
Si aprirà una finestra che permetterà di sceglier un file all’interno del computer.
Individuarlo, ed una volta trovato fare click su Ok. (upload)
In maniera diversa può essere fatto l’Uplaod del file Gatto. Png.
Esso va inserito direttamente dalla finestra Components utilizzando il pulsante Add. In fondo ad essa.
Sotto la scritta Media è possibile vedere i nomi dei file aggiunti.
In effetti, di entrambi i file pmg sarebbe stato possibile fare upload con il secondo metodo.
Sarebbe stato poi necessario assegnare il file Cane.png alla proprietà BackgroundImage di canvas1.
Aprire Block Editor
L’immagine contenuta nel Canvas1 viene cambiata al click su ciascuno dei due pulsanti.
Per questa ragione è necessario intercettare l’evento click su di essi e far compiere l’azione.
Siccome il cane è visibile all’avvio, iniziare dal pulsante Gatto che deve sostituirlo
In My Blocks fare click su Bgatto e trascinare il blocco Click nell’area di lavoro.
Fare click su Canvas1 e trascinare il blocco BackgroundImage sul blocco precedente incastrandolo dentro.
In Built-In, fare click su Test e trascinare il blocco text incastrandolo dopo la parola to del blocco precedente.
Fare click su text, che diventa editabile, e cambiarlo in Gatto.png facendo attenzione di scriverlo esattamente come si legge in Components della finestra Design.
Questo perché Gatto.png è il nome del file che verrà cercato durante l’esecuzione del codice per lo scambio dell'immagine.
Fare lo stesso per il pulsante Bcane.Click avendo cura di inserire Cane.png dove nel precedente è stato inserito Gatto.png

Sui primi blocchi vi è scritto (in inglese):
Quando (when) viene fatto click fare (do) >
setta lo sfondo (set Backgrund) con l’immagine (Image) a (to) > Gatto.png

Sui secondi la stessa cosa solo che cambia il pulsante e il file da caricare è Cane.png

 

Nel test sullo smartphon è stato riscontrato che, a volte, lanciando immediatamente il programma dopo l’installazione non trova l’immagine.
Lanciare il programma dalla normale icona e tutto è ok.