QT QML如何將LinearGradient添加到帶邊框的矩形？

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

結果在此：

我能看到爲什麼會產生這樣的結果，但如何用radius剪輯的漸變爲Rectangle？

謝謝。

Answer 1

clip總是被削波，並且不關心alpha - 值對Item的邊框素材。

但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只會剪裁到物品的矩形，而不是其實際的可見像素。

有你CA採取兩種方法：

1 - 嘗試通過Canvas元素來實現所期望的結果。

2 - 使用ShaderEffect您將具有漸變和圓角矩形的ShaderEffectSource紋理傳遞給其中，然後在實際着色器中使用第一個源（漸變）中的rgb和第二個中的alpha（圓角矩形）手動剪輯。

3 - 如果您打算使用ShaderEffect，您可以輕鬆地跳過使用漸變作爲源，並查看如何在GLSL中以任意角度實現漸變，並且僅將圓角矩形源用於alpha即使「着色」部分也可以在着色器中實現。