Масштабування зображень

Масштабування зображень — важлива частина конвергентних програм. Значки програм та малюнки (зображення) можна створити у форматі, зручному для масштабування.

../../_images/53.png

Один з найбільш популярних масштабованих форматів це SVG. Файли SVG можна створити за допомогою програми на кшталт Inkscape.

Хоча одна особливість qml полягає в тому, що SVG відтворюються з використовуванням меншого обсягу пам’яті, втрачаючи переваги масштабованості. Використовуючи файл SVG в елементі Image, можна використовувати властивість sourceSize. Це визначатиме розмір відтвореного зображення SVG. Зображення SVG із шириною та висотою sourceSize 252 пікселі відтворюватиметься так, ніби масштабоване зображення буде png 252 на 252 пікселі.

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

Різні розміри готового SVG-зображення

Для уникнення проблем із продуктивністю, не рекомендується визначати sourceSize як відносний розмір. Гарною практикою є визначення sourceSize на основі встановленого списку порогових значень. У наведеному нижче прикладі image.svg буде відтворено розміром 60 на 60 одиниць сітки, якщо розмір головного перегляду перевищує 70 одиниць сітки, та розміром 40 на 40 одиниць сітки в інших випадках. З визначенням цих порогових значень ми отримуємо масштабовані зображення без значних втрат продуктивності.

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

Більш докладно про ефективність роботи з зображеннями дізнайтеся з Qt wiki.