Scalatura delle immagini#

La scalabilità delle immagini è importante in un’app convergente. Le icone e le immagini delle app possono essere create in formati scalabili per migliorare la loro capacità di scalare.

../../_images/53.png

Uno dei formati scalabili più popolari è SVG. I file SVG possono essere creati con software come Inkscape.

Una particolarità di qml, però, è che gli SVG vengono resi per utilizzare meno memoria, perdendo i vantaggi della scalabilità. Quando si usa un file SVG in un elemento Image, si può usare la proprietà sourceSize. Questa definisce la dimensione dell’immagine SVG resa. Un’immagine SVG con una larghezza e un’altezza di sourceSize di 252 pixel, sarà resa come se l’immagine scalabile fosse una png di 252 per 252 pixel.

../../_images/icon-sizes.png

Diverse dimensioni di rendering della stessa immagine svg#

Non è consigliabile definire sourceSize come dimensione relativa per evitare problemi di prestazioni. Una buona pratica è definire sourceSize in base a un elenco di soglie. Nell’esempio seguente, l’immagine.svg sarà resa 60 per 60 unità di griglia se la vista principale è più grande di 70 unità di griglia, ma come immagine di 40 per 40 unità di griglia negli altri casi. Definendo queste soglie, si ottengono immagini scalabili senza un enorme costo in termini di prestazioni.

Image {
  source: "image.svg"
  sourceSize.width: mainView.width > units.gu(70) ? units.gu(60) : units.gu(40)
  sourceSize.height: sourceSize.width
}

Per saperne di più sulle prestazioni delle immagini, consultate il wiki di Qt.