如何在 ShapePath 中使用 LinearGradient？

Question

我想在自定义形状内绘制渐变。我以前使用过 fillColor 属性，现在尝试使用 fillGradient 属性。我想说的形状很好 - 至少它看起来像预期的那样:) 这个渐变的东西无论如何都不好。它只是看起来不像预期的那样。

这就是我想要做的。这应该像在 Qt Design Studio 中一样运行。

import QtQuick 2.15 
import QtQuick.Controls 2.15 
import QtQuick.Shapes 1.15 

Rectangle {
    id: btn
    color: "white"

    readonly property alias fieldHeight: p.fieldHeight

    Shape {
        ShapePath {
            id: p
            property int r: 172
            property int fieldWidth: 123
            property int fieldHeight: 79
            property int deltaX: 30
            startX: 0
            startY: 0
            strokeColor: "black"
            strokeStyle: ShapePath.SolidLine
            fillGradient: LinearGradient {
                GradientStop {
                    position: 0
                    color: "#6c6c6c"
                }
                GradientStop {
                    position: 1
                    color: "#000000"
                }
            }
            PathArc {
                id: upperBorder
                x: p.fieldWidth
                y: 0
                radiusX: p.r
                radiusY: p.r
            }
            PathLine {
                x: p.fieldWidth - p.deltaX
                y: p.fieldHeight
            }
            PathArc {
                x: p.deltaX
                y: p.fieldHeight
                radiusX: p.r
                radiusY: p.r
                direction: PathArc.Counterclockwise
            }
            PathLine {
                x: 0
                y: 0
            }
        }
    }
}

Answer 1

问题是您没有指定渐变应遵循的线的起点和终点。烦人的 Qt 有 2 个不同的对象，称为 LinearGradient，它们有不同的属性名称。一个来自 QtGraphicalEffects，另一个来自 QtQuick.Shapes。您使用的是形状版本，因此您的渐变应如下所示：

fillGradient: LinearGradient {
    x1: 0
    y1: 0
    x2: p.fieldWidth
    y2: p.fieldHeight

    GradientStop {
        position: 0
        color: "#6c6c6c"
    }
    GradientStop {
        position: 1
        color: "#000000"
    }
}