Тип QML Glow

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

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

Свойства

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

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

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

spread : псевдоним

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

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

transparentBorder : псевдоним

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

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

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

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

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