2

我在 QML 中使用 PieSeries 作为创建临时掩码的一种方式。我有一个圆形动画 gif，在它之上，我添加了一个 PieSeries。PieSeries 有 3 个 PieSlices。其中 2 个是“黑色”，基本上挡住了 gif 的相应部分。剩余的 PieSlice 是透明的。这很好用，但我希望 2 个黑色 PieSlice 对它们有一个渐变，这样它们的边缘就不会那么明显（渐变透明度）。

我已经尝试使用带有 OpacityMask 的 LinearGradient，如此处所述，但这在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（源- 原始文件太大而无法附加）：

原始 Gif 快照

这是它当前的动画外观：

低d.val

更高的 d.val

最大 d.val

这就是我希望它实际的样子（这里为 d.val 描述）：

具有梯度的更高 d.val

4

0 回答 0