Тип 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 Examples - Image Elements показывает, как можно использовать 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 полезна при работе с большими изображениями, чтобы убедиться, что они не кэшируются за счет маленьких изображений 'ui элементов'.

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.