Тип QML Glow

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

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

Свойства

• cached : псевдоним
• цвет : псевдоним
• радиус : псевдоним
• samples : псевдоним
• источник : псевдоним
• распространение : псевдоним
• прозрачнаяГраница : псевдоним

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

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

Свечение создаётся путём живого размытия изображения с помощью гауссова размытия. Выполнение живого размытия — ресурсоёмкая операция. Полностьюэкранное гауссово размытие даже с умеренным количеством samples будет работать только с 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.

цвет : псевдоним

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

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

радиус : псевдоним

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

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

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

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

samples : псевдоним

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

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

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

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

источник : псевдоним

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

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

распространение : псевдоним

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

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

прозрачнаяГраница : псевдоним

Это свойство определяет, имеет ли эффект прозрачную границу.

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

По умолчанию свойство установлено в 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
            }
        }
    }
}