QML PieSlice Градиентный цвет - PullRequest
0 голосов
/ 30 апреля 2018

Я использую PieSeries в QML как способ создания временной маски. У меня есть круговой анимированный GIF и поверх него я добавил PieSeries. PieSeries имеет 3 PieSlices. 2 из них являются «черными», по существу блокируя соответствующие части gif. Оставшийся PieSlice прозрачен. Это прекрасно работает, но я бы хотел, чтобы у 2 черных кусочков пирога был градиент, чтобы их кромка была не столь очевидна (прозрачность градиента).

Я пытался использовать LinearGradient с OpacityMask, как описано здесь , но это не имело никакого эффекта при использовании на PieSlice.

Любые предложения будут оценены:)

Вот мой код:

import QtQuick 2.0
import QtCharts 2.2
import QtGraphicalEffects 1.0

Item {
    anchors.fill: parent //Fill the gif area

    ChartView {
        id: chart
        anchors.centerIn: parent
        height: parent.height+200
        width: parent.width
        legend.visible: false
        antialiasing: false
        backgroundColor: "transparent"

        PieSeries {
            id: pieOuter
            size: 1.5
            holeSize: 0.2
            PieSlice { id: black1; value: 1; color: "black"; borderColor: "transparent" }
            PieSlice { id: valSlice; value: d.val; color: "transparent"; borderColor: "transparent" }
            PieSlice { id: black2; value: 1 - d.val; color: "black"; borderColor: "transparent" }
        }

    }
    OpacityMask{
        source: mask
        maskSource: black1
    }
    LinearGradient {
        id: mask
        anchors.fill: black1
        gradient: Gradient {
            GradientStop { position: 0.2; color: "transparent"}
            GradientStop { position: 0.5; color: "white" }
        }
    }

}

Примечание: d.val здесь содержит значение от 0 до 1

Редактировать Некоторые изображения, которые помогут визуализировать то, чего я пытаюсь достичь: GIF, с которого я начинаю ( source - исходный файл слишком велик для прикрепления):

Снимок оригинального Gif

Вот так выглядит анимация:

Низкий d.val

Выше d.val

Макс. День.

Вот как я хочу, чтобы это действительно выглядело (изображено здесь для d.val):

Высшее значение d.val с градиентом

...