在几个矩形上跨度渐变

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