複数の矩形に勾配をつける

Question

単一のLinearGradientをバックグラウンドとして使用し、いくつかの兄弟に分けて欲しいRectangle s。各Rectangleには、グラデーションの別の部分が表示されます。 OpacityMaskを使用して、Rectangleをグラディエントで«塗りつぶす»。 LinearGradient の合計は、それぞれRectanglewidthです。

私は単一のRectangleを使用すると動作します。 2つから始まり、私が試してみても正しく動作しません（私は想像するために以下のコードにビットを残しています）。私がこれまで持っていた最高の結果は、それぞれRectangleで繰り返されたLinearGradientの同じ部分を持っていることです。 GradientStopの値を変更してRectangleに1つのLinearGradientを使用することはできますが、複雑に見えますが、シンプルで洗練されたソリューションがあると思います。あなたは、ほとんどがあった

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全体が表示されます。それはあなたが望むだけのRectangle S、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) 
    } 
}