Тип Glow QML

Создаёт ореол-эффект свечения вокруг исходного элемента. Подробнее...

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

Свойства

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

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

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

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

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

Пример

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

import QtQuick 2.12
import QtGraphicalEffects 1.12

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

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

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

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

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

samples : псевдоним

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

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

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

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

source : псевдоним

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

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

spread : псевдоним

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

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

transparentBorder : псевдоним

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

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

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

В примере слева Rectangle имеет прозрачные края и размытые края, в то время как справа — нет.

import QtQuick 2.12
import QtGraphicalEffects 1.12

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
            }
        }
    }
}