如何将 RadialGradient 应用于形状？

Question

这是我目前的情况：

a RadialGradient 下面以蓝色显示
a Shape 下面以绿色显示

然而，我想要的是将RadialGradient用作OpacityMask，这样绿色Shape的外圈是100%不透明的，但是直线应该在图像中间逐渐变细到完全透明。 None 到目前为止，我的努力已经奏效。当我将 RadialGradient 和 Shape 都设置为 visible: 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 的大小实际上没有被设置 (size=0x0) 有关。然后将其中的所有内容写入 'view'.

之外

如何将 RadialGradient 应用于形状？

How do I apply a RadialGradient to a Shape?

qml

shapes

opacitymask