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

Пример Border Image в Примерах 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

4 линии границы (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 : enumeration

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

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

См. также progress.