Тип QML RadialGradient
Рисует радиальный градиент. Подробнее...
| Заявление импорта: | import QtGraphicalEffects 1.15 |
| С тех пор: | QtGraphicalEffects 1.0 |
| Наследует: |
Свойства
- angle : real
- cached : bool
- gradient : Gradient
- horizontalOffset : real
- horizontalRadius : real
- source : variant
- verticalOffset : real
- verticalRadius : real
Подробное описание
Градиент определяется двумя или более цветами, которые плавно смешиваются. Цвета начинаются от центра элемента и заканчиваются на границах.
| Применяемый эффект |
|---|
Примечание: Этот эффект доступен при работе с OpenGL.
Пример
Следующий пример демонстрирует, как применить эффект.
import QtQuick 2.12
import QtGraphicalEffects 1.12
Item {
width: 300
height: 300
RadialGradient {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 0.5; color: "black" }
}
}
} Документация по свойствам
angle : real
Это свойство определяет поворот градиента вокруг его центральной точки. Поворот виден только тогда, когда свойства horizontalRadius и verticalRadius не равны. Угол задается в градусах, и значение по умолчанию равно 0.
| Примеры вывода с различными значениями угла | ||
|---|---|---|
| angle: 0 | angle: 45 | angle: 90 |
| horizontalOffset: 0 | horizontalOffset: 0 | horizontalOffset: 0 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 100 | horizontalRadius: 100 | horizontalRadius: 100 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
cached : bool
Это свойство позволяет кэшировать пиксели выходного эффекта для повышения производительности отрисовки.
Каждый раз при изменении свойств источника или эффекта пиксели в кэше должны обновляться. Потребление памяти увеличивается, так как требуется дополнительный буфер памяти для хранения выходных данных эффекта.
Рекомендуется отключать кэш, когда свойства источника или эффекта анимируются.
По умолчанию свойство установлено в false.
gradient : Gradient
Градиент определяется двумя или более цветами, которые плавно смешиваются. Цвета задаются как набор дочерних элементов GradientStop, каждый из которых определяет позицию на градиенте от 0,0 до 1,0 и цвет. Позиция каждого GradientStop задается путем установки свойства position. Цвет задается путем установки свойства color.
| Примеры вывода с различными значениями градиента | ||
|---|---|---|
gradient:Gradient {
GradientStop {
position: 0.000
color: Qt.rgba(1, 0, 0, 1)
}
GradientStop {
position: 0.167
color: Qt.rgba(1, 1, 0, 1)
}
GradientStop {
position: 0.333
color: Qt.rgba(0, 1, 0, 1)
}
GradientStop {
position: 0.500
color: Qt.rgba(0, 1, 1, 1)
}
GradientStop {
position: 0.667
color: Qt.rgba(0, 0, 1, 1)
}
GradientStop {
position: 0.833
color: Qt.rgba(1, 0, 1, 1)
}
GradientStop {
position: 1.000
color: Qt.rgba(1, 0, 0, 1)
}
} |
gradient:Gradient {
GradientStop {
position: 0.0
color: "#F0F0F0"
}
GradientStop {
position: 0.5
color: "#000000"
}
GradientStop {
position: 1.0
color: "#F0F0F0"
}
} |
gradient:Gradient {
GradientStop {
position: 0.0
color: "#00000000"
}
GradientStop {
position: 1.0
color: "#FF000000"
}
} |
| horizontalOffset: 0 | horizontalOffset: 0 | horizontalOffset: 0 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| angle: 0 | angle: 0 | angle: 0 |
horizontalOffset : real
Свойства horizontalOffset и verticalOffset определяют смещение в пикселях для центральной точки градиента по сравнению с центром элемента.
Значения варьируются от -inf до inf. По умолчанию эти свойства установлены в 0.
| Примеры вывода с различными значениями horizontalOffset | ||
|---|---|---|
| horizontalOffset: -150 | horizontalOffset: 0 | horizontalOffset: 150 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| angle: 0 | angle: 0 | angle: 0 |
horizontalRadius : real
Свойства horizontalRadius и verticalRadius определяют форму и размер радиального градиента. Если радиусы равны, форма градиента — круг. Если горизонтальный и вертикальный радиусы отличаются, форма — эллипс. Радиусы задаются в пикселях.
Значение варьируется от -inf до inf. По умолчанию horizontalRadius связан с шириной, а verticalRadius — с высотой.
| Примеры вывода с различными значениями horizontalRadius | ||
|---|---|---|
| horizontalRadius: 300 | horizontalRadius: 100 | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| verticalRadius: 300 | verticalRadius: 300 | |
| угол: 0 | угол: 0 | |
| gradient: QQuickGradient(0xa05fb10) | gradient: QQuickGradient(0xa05fb10) |
источник : variant
Это свойство определяет элемент, который будет заполнен градиентом. Источник элемента отрисовывается в промежуточный буфер пикселей, а значения альфа из результата используются для определения видимости пикселей градиента на экране. Значение по умолчанию для источника — undefined, и в этом случае вся область эффекта заполняется градиентом.
| Примеры вывода с различными значениями источника | ||
|---|---|---|
| источник: undefined | источник: Image { source: images/butterfly.png } | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| horizontalRadius: 300 | horizontalRadius: 300 | |
| verticalRadius: 300 | verticalRadius: 300 | |
| угол: 0 | угол: 0 |
Примечание: Не поддерживается включение эффекта в себя, например, путем установки источника в родительский элемент эффекта.
verticalOffset : real
Свойства horizontalOffset и verticalOffset определяют смещение в пикселях центральной точки градиента относительно центра элемента.
Значения варьируются от -inf до inf. По умолчанию эти свойства установлены в 0.
| Примеры вывода с различными значениями horizontalOffset | ||
|---|---|---|
| horizontalOffset: -150 | horizontalOffset: 0 | horizontalOffset: 150 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| угол: 0 | угол: 0 | угол: 0 |
verticalRadius : real
Свойства horizontalRadius и verticalRadius определяют форму и размер радиального градиента. Если радиусы равны, форма градиента — круг. Если горизонтальный и вертикальный радиусы различаются, форма — эллипс. Радиусы задаются в пикселях.
Значение варьируется от -inf до inf. По умолчанию horizontalRadius привязан к ширине, а verticalRadius — к высоте.
| Примеры вывода с различными значениями horizontalRadius | ||
|---|---|---|
| horizontalRadius: 300 | horizontalRadius: 100 | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| verticalRadius: 300 | verticalRadius: 300 | |
| угол: 0 | угол: 0 | |
| gradient: QQuickGradient(0xa05fb10) | gradient: QQuickGradient(0xa05fb10) |
© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/qt-5.15/qml-qtgraphicaleffects-radialgradient.html