如何将 RadialGradient 应用于形状？答案

【问题标题】：How do I apply a RadialGradient to a Shape?如何将 RadialGradient 应用于形状？
【发布时间】：2021-12-05 02:22:45
【问题描述】：

这是我目前所拥有的：

RadialGradient 在下方显示为蓝色
Shape 以绿色显示如下

然而，我想要的是使用RadialGradient 作为OpacityMask，这样绿色Shape 的外圈是100% 不透明的，但是直线应该在中间逐渐变细到完全透明图片。到目前为止，我的任何努力都没有奏效。当我将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
        }
    }
}

【问题讨论】：

标签： qml shapes opacitymask

【解决方案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 的大小有关，而Shape 的大小实际上并未设置（大小=0x0）。然后将其中的所有内容写入“视图”之外。

【讨论】：