Тип QML BorderImage

Рисует границу на основе изображения. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : перечисление
• mirror : bool
• progress : real
• smooth : bool
• source : url
• sourceSize : QSize
• status : перечисление
• verticalTileMode : перечисление

Подробное описание

Тип BorderImage используется для создания границ из изображений путём масштабирования или чередования частей каждого изображения.

BorderImage разбивает исходное изображение, указанное свойством source, на 9 областей, как показано ниже:

При масштабировании изображения области исходного изображения масштабируются или чередуются, чтобы создать отображаемое изображение границы следующим образом:

• Углы (области 1, 3, 7 и 9) вообще не масштабируются.
• Области 2 и 8 масштабируются в соответствии с horizontalTileMode.
• Области 4 и 6 масштабируются в соответствии с verticalTileMode.
• Центральная область (область 5) масштабируется в соответствии с обоими horizontalTileMode и verticalTileMode.

Области изображения определяются группой свойств border, которая описывает расстояние от каждого края исходного изображения, которое будет использоваться в качестве границы.

Пример использования

Следующие примеры показывают влияние различных режимов на изображение. На изображение наложены направляющие линии, чтобы показать различные области изображения, как описано выше.

Изображение без масштабирования отображается с помощью Image. Свойство border используется для определения частей изображения, которые будут находиться внутри областей углов без масштабирования, и частей, которые будут растягиваться по горизонтали и вертикали.

Image {
    source: "pics/borderframe.png"
}

BorderImage используется для отображения изображения, и ему присваивается размер, больший, чем исходное изображение. Поскольку свойство horizontalTileMode установлено в BorderImage.Stretch, части изображения в областях 2 и 8 растягиваются по горизонтали. Поскольку свойство verticalTileMode установлено в BorderImage.Stretch, части изображения в областях 4 и 6 растягиваются по вертикали.

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

Опять же, для отображения изображения используется большое BorderImage. С установленным свойством horizontalTileMode в BorderImage.Repeat, части изображения в областях 2 и 8 чередуются так, что они заполняют пространство в верхней и нижней части элемента. Аналогично, при установке свойства verticalTileMode в BorderImage.Repeat, части изображения в областях 4 и 6 чередуются, заполняя пространство слева и справа от элемента.

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

В некоторых ситуациях ширина областей 2 и 8 может не быть точным кратным ширине соответствующих областей в исходном изображении. Аналогично, высота областей 4 и 6 может не быть точным кратным высоте соответствующих областей. В таких случаях полезно использовать BorderImage.Round вместо BorderImage.Repeat.

Пример BorderImage в Примерах Qt Quick - Элементы изображений показывает, как BorderImage может использоваться для имитации эффекта тени на прямоугольном элементе.

Загрузка изображения

Загрузка исходного изображения может быть не мгновенной, в зависимости от его первоначального расположения. Прогресс загрузки можно отслеживать с помощью свойства progress.

См. также Image и AnimatedImage.

Документация по свойствам

currentFrame — это кадр, который в настоящее время виден. Значение по умолчанию — 0. Можно установить его на значение от 0 до frameCount - 1, чтобы отобразить другой кадр, если изображение содержит несколько кадров.

frameCount — это количество кадров в изображении. Большинство изображений имеют только один кадр.

Это свойство QML было добавлено в Qt 5.14.

Это свойство описывает, как повторять или растягивать средние части изображения границы.

• BorderImage.Stretch — Масштабирует изображение для соответствия доступной области.
• BorderImage.Repeat — Повторяет изображение, пока не закончится место. Может обрезать последнее изображение.
• BorderImage.Round — Подобно Repeat, но масштабирует изображения так, чтобы последнее изображение не обрезалось.

Режим чередования по умолчанию для каждого свойства — BorderImage.Stretch.

asynchronous : bool

Указывает, что изображения на локальном файловом хранилище должны загружаться асинхронно в отдельном потоке. Значение по умолчанию — false, что приводит к блокировке потока пользовательского интерфейса во время загрузки изображения. Установка asynchronous в true полезна, когда сохранение отзывчивости пользовательского интерфейса предпочтительнее мгновенного отображения изображений.

Обратите внимание, что это свойство применимо только к изображениям, считываемым из локального файлового хранилища. Изображения, загруженные с помощью сетевого ресурса (например, HTTP), всегда загружаются асинхронно.

border.bottom : int

Четыре линии границы (2 горизонтальные и 2 вертикальные) разбивают изображение на 9 областей, как показано ниже:

Каждая линия границы (слева, справа, сверху и снизу) задаёт смещение в пикселях от соответствующего края исходного изображения. По умолчанию каждая линия границы имеет значение 0.

Например, следующее определение устанавливает нижнюю линию на 10 пикселей выше от нижней части изображения:

BorderImage {
    border.bottom: 10
    // ...
}

Линии границы также можно задать с помощью .sci файла.

cache : bool

Указывает, должно ли изображение кэшироваться. Значение по умолчанию — true. Установка cache в false полезна при работе с большими изображениями, чтобы убедиться, что они не кэшируются в ущерб небольшим изображениям «элементов пользовательского интерфейса».

mirror : bool

Это свойство указывает, нужно ли зеркально отразить изображение по горизонтали (эффект отображения зеркального изображения).

Значение по умолчанию — false.

progress : real

Это свойство содержит прогресс загрузки изображения, от 0,0 (ничего не загружено) до 1,0 (загрузка завершена).

См. также status.

smooth : bool

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

По умолчанию это свойство установлено в true.

source : url

Это свойство содержит URL, указывающий на исходное изображение.

BorderImage может обрабатывать любые форматы изображений, поддерживаемые Qt, загруженные из любого URL-схемы, поддерживаемой Qt.

Это свойство также может использоваться для ссылки на .sci файлы, которые написаны в формате, специфичном для QML, на основе текста, который определяет границы, файл изображения и правила чередования для данного изображения границы.

Следующий .sci файл устанавливает границы в 10 пикселей с каждой стороны для изображения picture.png:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: "picture.png"

URL может быть абсолютным или относительным по отношению к URL компонента.

См. также QQuickImageProvider.

sourceSize : QSize

Это свойство содержит фактическую ширину и высоту загруженного изображения.

В BorderImage это свойство является только для чтения.

См. также Image::sourceSize.

status : перечисление

Это свойство описывает состояние загрузки изображения. Оно может принимать одно из следующих значений:

• BorderImage.Null - изображение не задано
• BorderImage.Ready - изображение загружено
• BorderImage.Loading - изображение загружается в данный момент
• BorderImage.Error - произошла ошибка при загрузке изображения

См. также progress.