Тип BorderImage QML

Рисует границу на основе изображения. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• asynchronous : bool
• border
  • border.left : int
  • border.right : int
  • border.top : int
  • border.bottom : int
• cache : bool
• horizontalTileMode : перечисление
• mirror : bool
• progress : вещественное
• 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.

Документация по свойствам

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 : вещественное

Это свойство содержит прогресс загрузки изображения, от 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.