Qt 矩形上的渐变'；QML中的s边界

我提出的这个问题对于其他语言和框架来说似乎很常见：

如何在矩形的边框上应用渐变？ 到目前为止，我的解决方案是一个自定义组件，例如：

Item {
    id: root
    property int borderWidth
    property alias borderGradient: border.gradient
    property alias gradient: fill.gradient
    property alias color: fill.color
    property int radius

    Rectangle {
        id: border
        anchors.fill: parent
        radius: root.radius

        Rectangle {
            id: fill
            anchors.fill: parent
            anchors.margins: root.borderWidth
            radius: root.radius * width / border.width / 2
        }
    }
}

然而，这不允许我将矩形的颜色设置为“透明”，这很悲哀，但我可以接受它。我仍然想知道，是否有更优雅的方式（除了直接使用Context2D或QSG…）

您好，

---

-m-

根据评论中ddriver的建议，我制作了一个矩形的工作示例，您可以使用OpacityMask为边框设置渐变。 我在某个地方听说QtGraphicalEffects的性能很差，因此我可能在将来不使用它的情况下尝试一个，但对于任何不关心的人来说，这是一个有效的示例：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: root
    property Gradient borderGradient
    property int borderWidth: 0


    Loader {
        id: loader
        active: borderGradient
        anchors.fill: parent
        sourceComponent: border
    }

    Component.onCompleted: console.log(loader.active)

    Component {
        id: border
        Item {
            Rectangle {
                id: borderFill
                radius: root.radius
                anchors.fill: parent
                gradient: root.borderGradient
                visible: false
            }

            Rectangle {
                id: mask
                radius: root.radius
                border.width: root.borderWidth
                anchors.fill: parent
                color: 'transparent'
                visible: false   // otherwise a thin border might be seen.
            }

            OpacityMask {
                id: opM
                anchors.fill: parent
                source: borderFill
                maskSource: mask
            }
        }
    }
}

它将仅在需要时（设置边界渐变时）使用OpacityMask，否则其行为类似于普通矩形

---

我希望我能在这方面帮助别人。

QQuickPaintedItem

可能是最简单的。可能有一些方法可以使用

不透明贴图

着色器效果对其进行破解，或者在

画布

中绘制一次渐变帧，然后将画布用作图像源，类似于此处介绍的方法：哇，看起来很复杂。我需要一些时间来消化。谢谢虽然我试图避免使用qtgraphicaleffect，但OpacityMask确实非常强大！