Question

这个问题对于其他语言和框架似乎很常见：

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

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 -

Answer 1

根据评论中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（设置borderGradient时），否则它的行为就像一个普通的矩形。

我希望我可以帮助别人。

QML中矩形边框的渐变

1 个答案: