Тип QML Glow

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

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

Свойства

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

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

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

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

Пример

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

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

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

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

В фрагменте ниже прямоугольник слева имеет прозрачные границы и размытые края, в то время как прямоугольник справа — нет.

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