Question

我希望有一个比Rectangle的默认垂直梯度更具体的渐变。我尝试为对角线效果添加LinearGradient，但它会覆盖边框。

考虑这个例子。顶部Rectangle可以使用垂直渐变和边框。底部Rectangle渐变会覆盖边框和radius。我尝试了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"
                    }
                }
            }
        }
    }
}

结果如下：

我可以看到为什么会出现这种结果，但是如何使用Rectangle将渐变剪切为radius？

感谢。

Answer 1

clip始终在剪切的Item的边界矩形处剪辑，而不关心alpha - 值。

然而，LinearGradient还有另一种工具，可以满足您的需求：
- source-property。

见这个例子：

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" }
        }
    }
}

Answer 2

QML仅支持垂直渐变。您可以通过翻转项目的宽度和高度并旋转它来伪造水平渐变。

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

至于使用剪辑的计划，它也不会起作用，因为QML screnegraph只剪辑到项目的矩形，而不是它的实际可见像素。

您可以采取两种方法：

1 - 尝试通过Canvas元素完成所需的结果。

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

3 - 如果您打算使用ShaderEffect，您可以轻松跳过使用渐变作为源，并查找如何在GLSL中以任意角度实现渐变，并仅使用圆角矩形源对于alpha，即使＆＃34;舍入＆＃34;部分也可以在着色器中实现。

QT QML如何将LinearGradient添加到带边框的Rectangle？

2 个答案: