首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >QML如何将LinearGradient添加到带有边框的矩形中?

QML如何将LinearGradient添加到带有边框的矩形中?
EN

Stack Overflow用户
提问于 2017-03-11 23:11:15
回答 2查看 5.2K关注 0票数 4

我想要一个比默认垂直梯度更具体的Rectangle。我尝试为对角线效果添加一个LinearGradient,但它覆盖边框。

以这个例子为例。顶部Rectangle确定与垂直梯度和边框。底部Rectangle梯度覆盖边框和radius。我试过clipgradient: LinearGradient,但它们也没有工作。

代码语言:javascript
运行
复制
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"
                    }
                }
            }
        }
    }
}

这方面的结果:

我可以理解为什么这会产生这样的结果,但是如何将梯度裁剪到带有Rectangleradius

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-11 23:41:46

clip总是在正在裁剪的Item的边界矩形处剪辑,而不关心alpha-values。

然而,LinearGradient还有另一个工具来实现您想要的:

参见此示例:

代码语言:javascript
运行
复制
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" }
        }
    }
}
票数 5
EN

Stack Overflow用户

发布于 2017-03-11 23:21:07

QML只支持垂直梯度。你可以通过翻转物品的宽度和高度并旋转来伪造水平梯度。

对于不能工作的对角线,因为矩形也会被旋转。

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

有两种方法你可以采取:

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

2-使用ShaderEffect向其传递带有渐变和圆形矩形的ShaderEffectSource纹理,然后在实际着色器中使用来自第一个源的rgb (渐变)和从第二个ShaderEffectSource纹理(圆形矩形)手动剪辑。

3-如果要使用ShaderEffect,可以轻松跳过使用渐变作为源,并查找如何在GLSL中以任意角度实现渐变,并且只对alpha使用圆角矩形源,即使“圆形”部分也可以在着色器中实现。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42741789

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档