QT QML如何向带边框的矩形添加LinearGradient？

对于

矩形

，我希望有一个比默认垂直梯度更具体的梯度。我尝试添加一个

LinearGradient

以获得对角线效果，但它会覆盖边框

考虑这个例子。顶部

矩形

正常，带有垂直渐变和边框。底部

矩形

渐变覆盖边框和

半径

。我尝试了

clip

和

gradient:LinearGradient

但是它们都不起作用

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

ApplicationWindow
{
    visible: true
    width: 640
    height: 480

    Column
    {
        spacing: 20
        width: parent.width
        Rectangle 
        {
            width: 200
            height: 200

            border.width: 4
            border.color: "#888"
            radius: 10

            // adds a vertical gradient to button
            gradient: Gradient
            {
                GradientStop 
                {
                    position: 0
                    color: "#eee"
                }
                GradientStop
                {
                    position: 1
                    color: "#ccc"
                }
            }
        }

        Rectangle 
        {
            width: 200
            height: 200

            border.width: 4
            border.color: "#888"
            radius: 10

            // try to add diagonal gradient, but overwrites button border
            // also can't do, gradient: LinearGradient  ?
            LinearGradient
            {
                anchors.fill: parent
                start: Qt.point(0,0)
                end: Qt.point(parent.width,parent.height)

                gradient: Gradient
                {
                    GradientStop 
                    {
                        position: 0
                        color: "#eee"
                    }
                    GradientStop
                    {
                        position: 1
                        color: "#ccc"
                    }
                }
            }
        }
    }
}

结果如下：

---

我可以理解为什么会有这样的结果，但是如何将渐变剪裁成具有

半径的
矩形
？
QML只支持垂直渐变。可以通过翻转项目的宽度和高度并旋转它来模拟水平渐变

对于不起作用的对角线，矩形也会旋转

至于使用剪裁的计划，这也行不通，因为QML screnegraph只会剪裁到项目的矩形，而不是它的实际可见像素

您可以采取两种方法：

1-尝试通过
Canvas
元素实现所需的结果

2-使用
ShaderEffect
将带有渐变和圆角矩形的
ShaderEffectSource
纹理传递给它，然后在实际着色器中使用第一个源（渐变）的rgb和第二个源（圆角矩形）的alpha手动剪裁

3-如果要使用
ShaderEffect
，可以轻松跳过使用渐变作为源，并查看如何在GLSL中以任意角度实现渐变，并且仅对alpha使用圆角矩形源，即使“圆角”零件也可以在着色器中实现。
clip
始终在要剪裁的
项
的边界矩形处进行剪裁，而不关心
alpha
-值

但是，
LinearGradient
还有另一个工具，可以实现您想要的功能：

-这个

请参见此示例：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Window {
    width: 1024
    height: 800
    visible: true

    Rectangle {
        id: rect1
        width: 100
        height: 100
        radius: 20
    }

    LinearGradient {
        anchors.fill: rect1
        source: rect1          <-- Here is where you specify its shape. 
        start: Qt.point(0, 0)
        end: Qt.point(300, 300)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
    }
}

导入QtQuick 2.0
导入QtQuick.Window 2.0
导入QtQuick.Controls 1.4
导入QtQuick.Controls.Styles 1.4
导入QtGraphicalEffects 1.0
窗口{
宽度：1024
身高：800
可见：正确
长方形{
id:rect1
宽度：100
身高：100
半径：20
}
线性梯度{
锚。填充：1
来源：rect1@derM它看起来和矩形的香草梯度一样有限。它不是。它有一个
source
啊，是的，我没有注意到。source，似乎是答案。谢谢。这是答案。但是要修复任何
半径
边框。我必须添加eg
锚。边距：rect1.radius
否则它会工作。谢谢。