Тип 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 — количество кадров в изображении. Большинство изображений имеют только один кадр.

Данная документация была добавлена в 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.