Тип 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 - Элементы изображения демонстрирует, как можно использовать BorderImage для имитации эффекта тени на прямоугольном элементе.

Загрузка изображения

Исходное изображение может загружаться не мгновенно, в зависимости от его исходного расположения. Прогресс загрузки можно отслеживать с помощью свойства progress.

См. также Image и AnimatedImage.

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

horizontalTileMode : перечисление

Это свойство описывает, как повторять или растягивать средние части изображения границы.

• BorderImage.Stretch - Масштабирует изображение для соответствия доступной области.
• BorderImage.Repeat - Повторяет изображение до тех пор, пока больше нет места. Может обрезать последнее изображение.
• BorderImage.Round - Как Repeat, но масштабирует изображения вниз, чтобы убедиться, что последнее изображение не обрезано.

По умолчанию режим чередования для каждого свойства — BorderImage.Stretch.

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 полезна при работе с большими изображениями, чтобы убедиться, что они не кэшируются в ущерб небольшим изображениям «элементов пользовательского интерфейса».

mirror : bool

Это свойство указывает, должно ли изображение быть горизонтально инвертировано (фактически отображая зеркальное изображение).

Значение по умолчанию — false.

progress : real

Это свойство содержит прогресс загрузки изображения, от 0,0 (ничего не загружено) до 1,0 (закончено).

См. также status.

smooth : bool

Это свойство указывает, применяется ли плавное фильтрация при масштабировании или преобразовании изображения. Плавное фильтрация обеспечивает лучшее качество изображения, но на некоторых устройствах может быть медленнее. Если изображение отображается в натуральную величину, это свойство не оказывает визуального или производительного влияния.

По умолчанию это свойство установлено в true.

source : url

Это свойство содержит URL, который ссылается на исходное изображение.

BorderImage может обрабатывать любые форматы изображений, поддерживаемые Qt, загруженные из любого поддерживаемого Qt схемы URL.

Это свойство также может использоваться для ссылки на .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.