Question

我有一个带圆角（半径）的简单矩形，但想为它的背景颜色应用渐变。

Rectangle {
    id: rect
    width: 200
    height: 200

    radius: 20

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0,parent.height/2)
        end: Qt.point(parent.width,parent.height/2)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "green" }
        }
    }
}

我在想OpacityMask可能会有所帮助吗？不过，我试过用一个无济于事。我想知道我是否只是缺少某些东西，或者解决方案是否更复杂。

Answer 1

Qt图形效果很强大，但功耗很大。只要有可能，最好继续使用Qt Quick核心原语。也许它只是简化的测试用例，现实生活中的用例更加复杂，但是显示的测试用例可以通过简单的圆形，旋转和渐变填充来实现Shop here cheap：

Rectangle

要备份性能声明，让我们看看使用QML bench基准测试工具测量的一些数字。我们使用Rectangle { id: rect width: 200 height: 200 radius: 20 rotation: -90 gradient: Gradient { GradientStop { position: 0.0; color: "red" } GradientStop { position: 1.0; color: "green" } } }和OpacityMask对使用LinearGradient和Rectangle的解决方案进行基准测试，使用普通Gradient和ID: OS: macOS High Sierra (10.13) QPA: cocoa GL_VENDOR: Intel Inc. GL_RENDERER: Intel HD Graphics 5000 OpenGL Engine GL_VERSION: 2.1 INTEL-10.30.14 running: lineargradient_opacitymask.qml 11 frames 11 frames 11 frames 11 frames 11 frames Average: 11 frames;; MedianAll=11; StdDev=0, CoV=0 All done...。这些基准测试是在最新的Qt 5.10.1版本上运行的，这是一款老式的MacBook Air（Intel Core i5-4260U，Intel HD 5000，macOS 10.13）。

LinearGradient + OpacityMask

ID:          
OS:          macOS High Sierra (10.13)
QPA:         cocoa
GL_VENDOR:   Intel Inc.
GL_RENDERER: Intel HD Graphics 5000 OpenGL Engine
GL_VERSION:  2.1 INTEL-10.30.14
running: rect_gradient.qml
    332 frames
    331 frames
    334 frames
    313 frames
    331 frames
    Average: 328.2  frames;; MedianAll=331; StdDev=8.58487, CoV=0.0261574
All done...

Rectangle::gradient

{{1}}

Answer 2

嗯，不透明蒙版应该可以使用，但是你必须隐藏圆角的来源才能看到，否则它们会从背面显示......

  Rectangle {
    id: rect
    width: 200
    height: 200    
    // radius: 20 - redundant
    visible: false // hide it!!!

    LinearGradient {
      anchors.fill: parent
      start: Qt.point(0,parent.height/2)
      end: Qt.point(parent.width,parent.height/2)
      gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 1.0; color: "green" }
      }
    }
  }

  OpacityMask {
    anchors.fill: rect
    source: rect
    maskSource: Rectangle {
      width: 200
      height: 200
      radius: 20
    }
  }

Answer 3

设置LinearGradient的source属性，它应该解决这个问题：

Rectangle {

    id: rect
    width: 200
    height: 200
    radius: 20

    LinearGradient {
        anchors.fill: parent
        source: rect
        start: Qt.point(0,parent.height/2)
        end: Qt.point(parent.width,parent.height/2)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "green" }
        }
    }
}

QML - 具有半径的矩形的LinearGradient？

3 个答案:

LinearGradient + OpacityMask

Rectangle::gradient