在幾個矩形上跨度漸變

Question

我想用單個LinearGradient作爲背景，跨越幾個同級Rectangle s。在每個Rectangle中，您可以看到漸變的不同部分。 我使用OpacityMask來「填充」Rectangle s的梯度。 LinearGradientwidth是各個總和Rectanglewidth。

如果我使用單一的Rectangle，它的工作原理。從兩開始，無論我嘗試什麼，它都表現不正確（我在下面的代碼中留下想象）。到目前爲止，我得到的最好結果是在每個Rectangle中重複使用LinearGradient的相同部分。 我想我可以使用一個LinearGradient每Rectangle，改變GradientStop值，但它看起來很複雜，我想有一個簡單的優雅的解決方案。

Rectangle 
    { 
     id: page1 
//  anchors.fill: parent 

//   id: masqCont 
      anchors.centerIn: parent 
      border.color: "blue" 
      width: childrenRect.width 
      height: childrenRect.height 
      visible: false 

      Rectangle 
      { 
       id: masq1 
       y:0 
       border.color: "red" 
       border.width: 10 
       width: 100 
       height: 100 
       radius: 40 
       Text {text: "Un"} 
       visible: true 
      } 
      Rectangle 
      { 
       x:width 
       id: masq2 
       border.color: "red" 
       border.width: 10 
       width: 100 
       height: 100 
       radius: 40 
       Text {text: "deux"} 
       Text {text: "deux"} 
       visible: true 
      } 
    } 

      LinearGradient { 
       id:grad 
       width: 200 //masqCont.childrenRect.width 
       height: 100//masqCont.childrenRect.height 

       //anchors.fill: masqCont 
       start: Qt.point(0, 0) 
       end: Qt.point(200,100)//masqCont.width, masqCont.height) 
       gradient: Gradient { 
        GradientStop { position: 0.0; color: "white" } 
        GradientStop { position: 1.0; color: "black" } 
       } 
       visible: false 
      } 
      OpacityMask { 
       id: om21 
       anchors.fill: page1; 
       source: grad 
       maskSource: page1; 
      } 
//   OpacityMask { 
//    id: om21 
//    anchors.fill: masq1; 
//    source: grad 
//    maskSource: masq1; 
//   } 
//   OpacityMask { 
//    id: om22 
//    anchors.fill: masq2; 
//    source: grad 
//    maskSource: masq2; 
//   } 
    //  } 

// } 

Answer 1

你是幾乎沒有。

主要問題是您選擇了一個白色的矩形作爲您的子矩形的容器。這會導致顯示整個LinearGradient，因爲蒙版完全不透明（無Alpha）。

請參閱以下工作的例子如果只是Rectangle是你想要的，OpacityMask是矯枉過正（您可以通過拖動來移動矩形）

import QtQuick 2.7 
import QtQuick.Window 2.0 
import QtQuick.Controls 2.0 
import QtGraphicalEffects 1.0 

ApplicationWindow 
{ 
    visible: true 
    width: 500 
    height: 400 

    Item 
    { 
     id: page1 
     anchors.fill: parent 
     opacity: 0 
     Repeater 
     { 
      model: 20 
      Rectangle 
      { 
       id: masq1 
       x:Math.random()*(page1.width-width) 
       y:Math.random()*(page1.height-height) 
       width: 50 
       height: 50 
       radius: 5 

       MouseArea 
       { 
        anchors.fill: parent 
        drag.target: parent 
       } 
      } 
     } 
    } 

    LinearGradient { 
     id:grad 
     anchors.fill: page1 
     start: Qt.point(0, 0) 
     end: Qt.point(page1.width, 0) 
     gradient: Gradient { 
      GradientStop { position: 0.0; color: "white" } 
      GradientStop { position: 1.0; color: "black" } 
     } 
     visible: false 
    } 

    OpacityMask { 
     anchors.fill: page1; 
     source: grad 
     maskSource: page1; 
    } 


} 

Answer 2

。 您可能只需使用ShaderEffectSource。

您將soruceItem設置爲您的漸變，然後選擇sourceRect等於您Rectangle。您可能需要使用map[From/To]Item來正確映射座標。

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow { 
    id: win 
    visible: true 
    width: 400 
    height: 400 

    Rectangle { 
     id: grad 
     anchors.fill: parent 
     gradient: Gradient { 
      GradientStop { position: 0; color: 'blue' } 
      GradientStop { position: 0.33; color: 'red' } 
      GradientStop { position: 0.66; color: 'yellow' } 
      GradientStop { position: 1; color: 'blue' } 
     } 

     visible: false 
    } 

    ShaderEffectSource { 
     sourceItem: grad 
     x: 50 
     y: 50 
     height: 100 
     width: 200 
     sourceRect: Qt.rect(x, y, width, height) 
    } 

    ShaderEffectSource { 
     sourceItem: grad 
     x: 280 
     y: 80 
     height: 150 
     width: 70 
     sourceRect: Qt.rect(x, y, width, height) 
    } 
}