Compilació de la imatge

L’escalat d’imatges és important en una aplicació convergent. Les icones d’aplicacions i les imatges es poden crear en formats escalables per millorar la seva capacitat d’escalar.

Un dels formats escalables més populars és .SVG <https://en.wikipedia.org/wiki/ScalableVectorGraphics>.. Els fitxers SVG es poden crear utilitzant programari com .Inkscape <https://inkscape.org/>..

Una particularitat de qml, però, és que els SVG es renderitzen per utilitzar menys memòria, perdent els avantatges de l’escalabilitat. En utilitzar un fitxer SVG en un element Image podem utilitzar la propietat anomenada sourceSize. Això definirà la mida renderitzada de la imatge SVG. Una imatge SVG amb una amplada sourceSize i una alçada de 252 píxels, es representarà com si la imatge escalable fos una png de 252 per 252 píxels.

Diferents mides renderitzades de la mateixa imatge svg

No és recomanable definir sourceSize com una mida relativa per evitar problemes de rendiment. Una bona pràctica és definir sourceSize basant-se en una llista de llindars establerta. En l’exemple de sota la imatge.svg es renderitzarà 60 per 60 unitats de graella si la vista principal és més gran que 70 unitats de graella, però com una imatge de 40 per 40 unitats de graella en els altres casos. En definir aquests llindars, obtenim imatges escalables sense un cost de rendiment enorme.

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

Llegeix més sobre el rendiment de la imatge al wiki de Qt.