Тип QML BorderImage

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

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

Свойства

• asynchronous : bool
• border
  • border.left : int
  • border.right : int
  • border.top : int
  • border.bottom : int
• cache : bool
• 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 в таких случаях.

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

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

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

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

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

asynchronous : bool

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

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

border.left : int

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

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

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

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

Линии границы также можно указать, используя .sci-файл.

cache : bool

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

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

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

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

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

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.

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

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

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

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