Тип QML DropShadow
Создаёт мягкую тень позади элемента-источника. Подробнее...
| Заявление об импорте: | import QtGraphicalEffects 1.0 |
| С: | QtGraphicalEffects 1.0 |
| Наследует: |
Свойства
- 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