Spec-Zone.ru › Qt 5.11

Тип QML DropShadow

Генерирует мягкую тень позади элемента-источника. Подробнее...

Оператор импорта: import QtGraphicalEffects 1.0
С момента: QtGraphicalEffects 1.0
Наследуется от:

Item

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

Свойства

  • cached : псевдоним
  • color : псевдоним
  • horizontalOffset : вещественное
  • radius : целое число
  • samples : псевдоним
  • source : псевдоним
  • spread : псевдоним
  • transparentBorder : псевдоним
  • verticalOffset : вещественное

Подробное описание

Эффект DropShadow размывает альфа-канал входных данных, раскрашивает результат и размещает его позади объекта-источника, создавая мягкую тень. Цвет тени можно изменить, используя свойство color. Положение тени можно изменить, используя свойства horizontalOffset и verticalOffset.

Источник Применяемый эффект

Мягкая тень создается путем размытия изображения в режиме реального времени с помощью гауссового размытия. Выполнение размытия в режиме реального времени является дорогостоящей операцией. Полное гауссово размытие с даже умеренным числом образцов будет работать только со скоростью 60 кадров в секунду на графических процессорах высокого класса.

Если источник статичен, свойство cached можно установить для выделения другого буфера, чтобы избежать выполнения размытия каждый раз при отрисовке.

Примечание: Этот эффект доступен при работе с OpenGL.

Пример

Следующий пример демонстрирует, как применить эффект.

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    DropShadow {
        anchors.fill: butterfly
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 17
        color: "#80000000"
        source: butterfly
    }
}

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

cached : псевдоним

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

Рекомендуется отключать кэш, когда источник или свойства эффекта анимированы.

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

color : псевдоним

Это свойство определяет значение цвета RGBA, используемое для тени.

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

Примеры вывода с различными значениями цвета

color: #000000 color: #0000ff color: #aa000000
radius: 8 radius: 8 radius: 8
samples: 17 samples: 17 samples: 17
horizontalOffset: 0 horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 20 verticalOffset: 20 verticalOffset: 20
spread: 0 spread: 0 spread: 0

horizontalOffset : вещественное

Свойства horizontalOffset и verticalOffset определяют смещение для отрендеренной тени относительно позиции элемента DropShadow. Часто элемент DropShadow закрепляется таким образом, чтобы заполнить элемент-источник. В этом случае, если свойства horizontalOffset и verticalOffset установлены в 0, тень отображается точно под элементом-источником. Изменяя свойства смещения, тень можно позиционировать относительно элемента-источника.

Значения варьируются от -бесконечности до бесконечности. По умолчанию свойства установлены в 0.

Примеры вывода с различными значениями horizontalOffset

horizontalOffset: -20 horizontalOffset: 0 horizontalOffset: 20
radius: 4 radius: 4 radius: 4
samples: 9 samples: 9 samples: 9
color: #000000 color: #000000 color: #000000
verticalOffset: 0 verticalOffset: 0 verticalOffset: 0
spread: 0 spread: 0 spread: 0

radius : целое число

Radius определяет мягкость тени. Больший радиус приводит к тому, что края тени выглядят более размытыми.

Оптимальное размытие достигается путем выбора samples и radius таким образом, чтобы samples = 1 + radius * 2, например:

Радиус Образцы
0 (без размытия) 1
1 3
2 5
3 7

По умолчанию свойство установлено в floor(samples/2).

Примеры вывода с различными значениями радиуса

radius: 0 radius: 6 radius: 12
samples: 25 samples: 25 samples: 25
color: #000000 color: #000000 color: #000000
horizontalOffset: 0 horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 20 verticalOffset: 20 verticalOffset: 20
spread: 0 spread: 0 spread: 0

samples : alias

Это свойство определяет, сколько выборок делается на пиксель при расчёте размытия по краям. Большее значение обеспечивает лучшее качество, но медленнее отрисовывается.

В идеале, это значение должно быть вдвое больше максимального необходимого значения радиуса плюс единица, например:

Радиус Выборочные точки
0 (без размытия) 1
1 3
2 5
3 7

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

Это свойство не предназначено для анимации. Изменение этого свойства приведёт к повторной компиляции базовых шейдеров OpenGL.

source : alias

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

Примечание: Нельзя позволить эффекту включать себя, например, установив source на родительский элемент эффекта.

spread : alias

Это свойство определяет, насколько большая часть цвета тени усиливается вблизи краёв источника.

Значение находится в диапазоне от 0,0 до 1,0. По умолчанию свойство установлено в 0.0.

Примеры вывода с разными значениями spread

spread: 0,0 spread: 0,5 spread: 1,0
radius: 8 radius: 8 radius: 8
samples: 17 samples: 17 samples: 17
color: #000000 color: #000000 color: #000000
horizontalOffset: 0 horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 20 verticalOffset: 20 verticalOffset: 20

transparentBorder : alias

Это свойство определяет, будет ли у эффекта прозрачный край.

При установке в true, внешняя часть элемента дополняется 1-пиксельным прозрачным краем, что при выборке за пределами текстуры источника использует прозрачность вместо пикселей края. Без этого свойства изображение с непрозрачными краями не получит размытую тень.

На изображении ниже прямоугольник слева имеет прозрачные края и размытые края, в то время как прямоугольник справа этого не имеет:

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

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 180
    height: 100

    Row {
        anchors.centerIn: parent
        spacing: 16

        Rectangle {
            id: normalRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: false
                horizontalOffset: 8
                verticalOffset: 8
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            radius: 10
            color: "steelblue"
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 8
                verticalOffset: 8
            }
        }
    }
}

verticalOffset : real

Свойства HorizontalOffset и verticalOffset определяют смещение отрисованной тени по отношению к позиции элемента DropShadow. Часто элемент DropShadow привязывается так, чтобы заполнять элемент-источник. В этом случае, если свойства HorizontalOffset и verticalOffset установлены в 0, тень отрисовывается точно под элементом-источником. Изменяя свойства смещения, тень можно позиционировать относительно элемента-источника.

Значения находятся в диапазоне от -бесконечности до бесконечности. По умолчанию свойства установлены в 0.

Примеры вывода с различными значениями horizontalOffset

horizontalOffset: -20 horizontalOffset: 0 horizontalOffset: 20
radius: 4 radius: 4 radius: 4
samples: 9 samples: 9 samples: 9
color: #000000 color: #000000 color: #000000
verticalOffset: 0 verticalOffset: 0 verticalOffset: 0
spread: 0 spread: 0 spread: 0

© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/archives/qt-5.11/qml-qtgraphicaleffects-dropshadow.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API