Тип 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 Examples - Image Elements показывает, как 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, загруженные из любого схемы 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.