Тип 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.

Пример Примеры 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 полезна при работе с большими изображениями, чтобы убедиться, что они не кэшируются за счёт небольших изображений 'элементов пользовательского интерфейса'.

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, загруженные из любого поддерживаемого Qt схемы URL.

Это свойство также может использоваться для ссылки на файлы .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.