qml - 如何将 RadialGradient 应用于形状？

Question

这是我到目前为止所拥有的：

• aRadialGradient如下图蓝色
• aShape如下图绿色

然而，我想要的是使用RadialGradientas ，OpacityMask这样绿色的外环Shape是 100% 不透明的，但直线应该在图像中间逐渐变细以完全透明。到目前为止，我的任何努力都没有奏效。当我同时设置 theRadialGradient和Shapetovisible: false时，除了要在其中绘制所需图像的黑匣子外，我什么也得不到。

一个理想的答案还可以解释如何解决此类问题以解决问题。

import QtQuick 2.15
import QtQuick.Shapes 1.15
import QtGraphicalEffects 1.15

import QtQuick.Layouts 1.2
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.1

Rectangle {
    id: myFrame
    width: 640
    height: 640
    Rectangle {
        id: blackbox
        anchors.centerIn: parent
        anchors.fill: parent
        color: "black"
    
        layer.enabled: true
        layer.samples: 8
        RadialGradient {
            id: mask
            visible: true
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.4; color: "blue" }
            }
        }
        Shape {
            id: myShape
            x: parent.width / 2
            y: parent.width / 2
            visible: true
            ShapePath {
                fillColor: "transparent"
                strokeColor: Qt.rgba(0.318, 1, 0.051, 0.9)
                strokeWidth: blackbox.height * 0.02
                capStyle: ShapePath.RoundCap
                joinStyle: ShapePath.RoundJoin
                startX: 0
                startY: 0
                PathAngleArc {
                    radiusX: 0.46 * blackbox.width 
                    radiusY: 0.46 * blackbox.height
                    startAngle: 270 
                    sweepAngle: -360 * 0.7
                    moveToStart: false
                }
            }
        }
        OpacityMask {
            anchors.fill: parent
            source: myShape
            maskSource: mask
        }
    }
}

Answer 1

这就是我想出的：

import QtQuick 2.15
import QtQuick.Shapes 1.15
import QtGraphicalEffects 1.15

import QtQuick.Layouts 1.2
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.1

Rectangle {
    id: myFrame
    width: 640
    height: 640
    Rectangle {
        id: blackbox
        anchors.centerIn: parent
        anchors.fill: parent
        color: "black"
    
        layer.enabled: true
        layer.samples: 8
        RadialGradient {
            id: mask
            visible: false
            smooth: true
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.4; color: "blue" }
            }
        }
        Shape {
            id: myShape
            anchors.fill: parent
            visible: false
            smooth: true
            ShapePath {
                fillColor: "transparent"
                strokeColor: Qt.rgba(0.318, 1, 0.051, 0.9)
                strokeWidth: blackbox.height * 0.02
                capStyle: ShapePath.RoundCap
                joinStyle: ShapePath.RoundJoin
                startX: myShape.width / 2
                startY: myShape.width / 2
                PathAngleArc {
                    centerX: myShape.width / 2
                    centerY: myShape.width / 2
                    radiusX: 0.46 * blackbox.width 
                    radiusY: 0.46 * blackbox.height
                    startAngle: 270 
                    sweepAngle: -360 * 0.7
                    moveToStart: false
                }
            }
        }
        OpacityMask {
            anchors.fill: parent
            source: myShape
            maskSource: mask
        }
    }
}

本质上，它设置了Shape和 中心的大小ShapePath。

我认为这个问题与Shape实际未设置的大小（大小 = 0x0）有关。然后，其中的所有内容都写在“视图”之外。