2

その場しのぎのマスクを作成する方法として、QML で PieSeries を使用しています。円形のアニメーション GIF があり、その上に PieSeries を追加しました。PieSeries には 3 つの PieSlices があります。そのうちの 2 つは「黒」であり、基本的に gif の対応する部分をブロックしています。残りの PieSlice は透明です。これで問題なく動作しますが、2 つの黒い PieSlices にグラデーションを付けて、エッジがあまり目立たないようにしたいと思います (グラデーションの透明度)。

ここで説明されているように、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