Spec-Zone.ru › Qt 5.9

Тип 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

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 : псевдоним

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

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

Радиус Выборка
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, тень рендерится ровно под элементом-источником. Изменяя свойства смещения, тень можно позиционировать относительно элемента-источника.

Значения изменяются от -inf до inf. По умолчанию свойства установлены в 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/qt-5.9/qml-qtgraphicaleffects-dropshadow.html

Spec-Zone.ru

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