Тип 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 : перечисление

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

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

См. также progress.