渐变忽略父圆形

Question

我正在尝试创建一个内部带有渐变颜色的圆圈。半径低于下方的矩形工作正常，但一旦我添加 RadialGradient，它就会变回正方形。我尝试添加不透明蒙版，但没有用。这有什么问题吗？

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: light
    property string type: ""
    property bool connected: false
    property bool flagSet: false

    width: 50
    height: width
    radius: width / 2


    RadialGradient {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "green" }
            GradientStop { position: 0.5; color: "black" }
        }
    }


    OpacityMask {
        anchors.fill: parent
        source: light
        maskSource: Rectangle {
            height: light.height
            width: light.width
            radius: light.radius
        }
    }
}

Answer 1

这应该可以满足您的要求：

    Rectangle {
        id: border

        width: light.width + 2
        height: width
        radius: width / 2
        color: "red"

        RadialGradient {
            id: light
            anchors.centerIn: parent

            width: 50
            height: width

            gradient: Gradient {
                GradientStop { position: 0.0; color: "green" }
                GradientStop { position: 0.5; color: "black" }
            }

            layer.enabled: true
            layer.effect: OpacityMask {
                id: mask
                maskSource: Rectangle {
                    height: light.height
                    width: light.width
                    radius: width / 2
                }
            }
        }
    }

渐变忽略父圆形

Gradient ignores parent rounded shape

qt

gradient

rectangles

qml