Масштабирование изображений

Масштабирование изображений нужно для нормального функционирования режима конвергенции. Значки и изображения приложений лучше создавать в масштабируемом формате, чтобы улучшить их вид на разных устройствах.

../../_images/53.png

One of the most popular scalable formats is SVG. SVG files can be created using software like Inkscape.

One particularity of qml, though, is that SVGs are rendered to use less memory, losing the advantages of scalability. When using a SVG file in an Image element we can use the property called sourceSize. This will define the rendered size of the SVG image. A SVG image with a sourceSize width and height of 252 pixels, will be rendered as if the scalable image would be a png of 252 per 252 pixels.

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

Разные размеры одного SVG-изображения после рендеринга

Не рекомендуется определять sourceSize как относительный размер, чтобы избежать проблем с производительностью. Лучше всего определять sourceSize на основе заданного списка пороговых значений. В приведенном ниже примере изображение image.svg будет показываться в размерах 60 на 60 gu, если основной масштаб больше 70 gu. В других случаях будет формироваться изображение размерами 40 на 40 gu. Настройка порогов значений помогает получить масштабируемые изображения без затрат мощности устройства на рендеринг.

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

Подробнее о работе с изображениями можно узнать в Qt wiki.