Тип QML Glow

Создаёт ореол, подобный свечению, вокруг исходного элемента. Подробнее...

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

Свойства

• cached : псевдоним
• color : псевдоним
• radius : псевдоним
• samples : псевдоним
• source : псевдоним
• spread : псевдоним
• transparentBorder : псевдоним

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

Эффект Glow размывает альфа-канал исходного элемента и окрашивает его цветом color, помещая его за исходным элементом, создавая ореол или свечение вокруг объекта. Качество размытия края можно контролировать с помощью свойства samples и radius, а интенсивность свечения можно изменить с помощью spread.

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

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

Пример

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

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

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

    Glow {
        anchors.fill: butterfly
        radius: 8
        samples: 17
        color: "white"
        source: butterfly
    }
}

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

cached : псевдоним

Это свойство позволяет кэшировать пиксели вывода эффекта для повышения производительности рендеринга.

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

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

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

color : псевдоним

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

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

radius : псевдоним

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

В зависимости от значения radius, значение samples должно быть достаточно большим, чтобы обеспечить визуальное качество.

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

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

samples : псевдоним

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

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

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

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

source : псевдоним

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

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

spread : псевдоним

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

Значения изменяются от 0.0 до 1.0. По умолчанию свойство установлено в 0.5.

transparentBorder : псевдоним

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

Когда установлено true, внешний вид элемента дополняется прозрачным краем, делая выборку вне текстуры источника прозрачной вместо пикселей края. Без этого свойства изображение с непрозрачными краями не получит размытых краёв.

По умолчанию свойство установлено в true. Установите его в false, если у источника уже есть прозрачный край, чтобы немного ускорить размытие.

На приведённом ниже фрагменте Rectangle слева имеет прозрачные границы и размытые края, а Rectangle справа — нет.

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
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: false
            }
        }

        Rectangle {
            id: transparentBorderRect
            width: 60
            height: 60
            color: "black"
            radius: 10
            layer.enabled: true
            layer.effect: Glow {
                samples: 15
                color: "blue"
                transparentBorder: true
            }
        }
    }
}