Immagine SVG avanzata¶
Applicazioni
Usato tipicamente per modificare in parte o interamente, in modo statico o dinamico, i colori di un’immagine SVG, per esempio icone, immagini dinamiche a seconda di specifiche logiche di runtime, oppure sfondi di altri oggetti (vedere oggetto Immagine). Permette di realizzare le azioni seguenti:
Configurare l’oggetto
Impostare l’immagine da visualizzare
In UI fare clic destro sul contenitore desiderato (MainWindow (type), Pannello…), poi scegliere Nuovo > Disegni > Immagine SVG avanzata: compare il nuovo oggetto.
Accanto alla proprietà Percorso dell’oggetto, fare clic su Sfoglia: si apre la cartella Seleziona file.
Fare clic sull’immagine desiderata, quindi fare clic su Seleziona: l’immagine compare nell’editor degli oggetti.
Impostare un colore personalizzato per una sezione dell’immagine
Prerequisito: per modificare parti dell’immagine è necessario che nel file SVG le diverse parti siano identificate da specifici ID.
Fare clic su
accanto a Proprietà elementi SVG: compare la nuova proprietà.
In ID selezionare la sezione dell’immagine desiderata.
In Proprietà, per modificare il colore della sezione di interesse, selezionare la proprietà Colore.
Accanto a Valore, fare clic sul selettore di colori e scegliere il colore desiderato, oppure inserire il codice esadecimale del colore desiderato.
Impostare la modifica a runtime del colore della sezione
Prerequisito: per modificare parti dell’immagine è necessario che nel file SVG le diverse parti siano identificate da specifici ID.
Fare clic su
accanto a Proprietà elemento SVG: compare la nuova proprietà.In ID selezionare la sezione dell’immagine desiderata.
In Proprietà **, per modificare il colore della sezione di interesse, selezionare la proprietà **Colore.
Accanto a Valore fare clic su
> Avanzato per aprire l’editor dei collegamenti dinamici, poi selezionare la proprietà degli oggetti desiderata.
Ridimensionare un’immagine mantenendo le proporzioni originali
In Modalità riempimento selezionare Riempi.
Impostare un valore per una delle due dimensioni, ad esempio impostare Altezza su 50 pixel.
Impostare su Auto il valore dell’altra dimensione. Per farlo fare clic sulla proprietà, ad esempio Larghezza, e premere CANC.
L’immagine assume l’altezza desiderata, mentre la larghezza si adatta per mantenere le proporzioni originali.
Proprietà¶
Nome |
BrowseName |
DataType |
Descrizione |
|---|---|---|---|
| Percorso | Path |
Percorso del video |
|
| Modalità riempimento | FillMode |
Modalità di riempimento dell’oggetto immagine (Riempi = ridimensiona l’immagine mantenendo le proporzioni originali, Adatta = ridimensiona l’immagine adattando le proporzioni all’area dell’oggetto immagine) |
|
| Visibile ai click | HitTestVisible |
Vero = intercetta i clic dell’utente. Falso = non intercetta i clic dell’utente, che vengono invece passati all’oggetto sottostante, in base all’ordine sull’asse z. |
|
| Proprietà elementi SVG | SVGElementProperties |
Collezione di AdvancedSVGImageElementProperty |
Imposta il colore di una parte del file SVG |
| Visibilità | Visible |
Mostra/nasconde la finestra.
(Ereditato da Elemento)
|
|
| Abilitato | Enabled |
Abilita/disabilita l’interazione da parte dell’utente (Vero = abilitato, Falso = disabilitato).
(Ereditato da Elemento)
|
|
| Opacità | Opacity |
Livello di opacità (0 = trasparente)
(Ereditato da Elemento)
|
|
| Margine sinistro | LeftMargin |
(Solo se Allineamento orizzontale = Sinistra o Centro o Adatta) Distanza tra il bordo sinistro dell’oggetto e il bordo sinistro del suo contenitore.
(Ereditato da Elemento)
|
|
| Margine superiore | TopMargin |
(Solo se Allineamento verticale = Superiore o Centro o Adatta) Distanza tra il bordo superiore dell’oggetto e il bordo superiore del suo contenitore.
(Ereditato da Elemento)
|
|
| Margine destro | RightMargin |
(Solo se Allineamento orizzontale = Destra o Centro o Adatta) Distanza tra il bordo destro dell’oggetto e il bordo destro del suo contenitore.
(Ereditato da Elemento)
|
|
| Margine inferiore | BottomMargin |
(Solo se Allineamento verticale = Inferiore o Centro o Adatta) Distanza tra il bordo inferiore dell’oggetto e il bordo inferiore del suo contenitore.
(Ereditato da Elemento)
|
|
| Larghezza | Width |
Larghezza della finestra. Può assumere valori maggiori o uguali a zero. Il valore Auto imposta la larghezza uguale alla larghezza del contenuto (in questo caso, in mancanza di contenuto l’oggetto collassa).
(Ereditato da Elemento)
|
|
| Altezza | Height |
Altezza della finestra. Può assumere valori maggiori o uguali a zero. Il valore Auto imposta l’altezza uguale all’altezza del contenuto (in questo caso, in mancanza di contenuto l’oggetto collassa).
(Ereditato da Elemento)
|
|
| Allineamento orizzontale | HorizontalAlignment |
Allineamento dell’oggetto sull’asse orizzontale. Sinistra = il lato sinistro viene posizionato sul lato sinistro del contenitore, a meno di margine sinistro; Destra = il lato destro viene posizionato sul lato destro del contenitore, a meno di margine destro; Centro = il centro dell’oggetto viene posizionato al centro del contenitore, a meno di margini sinistro e/o destro; Adatta = la larghezza dell’oggetto equivale alla larghezza del contenitore, a meno di margini sinistro e/o destro.
(Ereditato da Elemento)
|
|
| Allineamento verticale | VerticalAlignment |
Allineamento dell’oggetto sull’asse verticale. Superiore = il lato superiore viene posizionato sul lato superiore del contenitore, a meno di margine superiore; Inferiore = il lato inferiore viene posizionato sul lato inferiore del contenitore, a meno di margine inferiore; Centro = il centro dell’oggetto viene posizionato al centro del contenitore, a meno di margini superiore e/o inferiore; Adatta = l’altezza dell’oggetto equivale all’altezza del contenitore, a meno di margini superiore e/o inferiore.
(Ereditato da Elemento)
|
|
| Rotazione | Rotation |
Rotazione dell’oggetto rispetto al suo centro. I valori positivi indicano gradi sessagesimali in senso orario.
(Ereditato da Elemento)
|
Eventi¶
Evento MouseDown¶
BrowseName: MouseDownEvent
Evento MouseUp¶
BrowseName: MouseUpEvent
Vedi anche
Esempi applicativi
Tutorial: progettare un’immagine dinamica rispetto allo stato di un allarme