Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Rectangle with both Linear gradient and drop shadow gives unexpected behaviour
Forum Updated to NodeBB v4.3 + New Features

Rectangle with both Linear gradient and drop shadow gives unexpected behaviour

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 3 Posters 925 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R_ramR Offline
    R_ramR Offline
    R_ram
    wrote on last edited by
    #1

    Hi Developers,

    I'm trying to get some circular component having the colour gradient in a horizontal manner and having some shadow effects. I tried the below way but it's not as expected. Can someone explain why is it happening like this? Result image attached.

    0_1559188924474_Screenshot from 2019-05-30 09-31-40.png

    // Code goes here

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.1
    import QtGraphicalEffects 1.0
    
    Window {
        visible: true
        width: 680
        height: 480
        title: qsTr("LinearGradient")
    
        property real circularShape_width: 50
        property real circularShape_height: 50
        property color leftGradientColor: "#F0EFEE"
        property color rightGradientColor: "lightgrey"
    
        Row {
            anchors.centerIn: parent
            spacing: 20
    
            // Circular background with gradient
            Rectangle {
                id:rect
                width: circularShape_width
                height: circularShape_height
                radius: circularShape_height/2
                LinearGradient {
                    source: rect
                    anchors.fill: rect
                    start: Qt.point(0, parent.height/2)
                    end: Qt.point(width, parent.height/2)
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: leftGradientColor}
                        GradientStop { position: 1.0; color: rightGradientColor}
                    }
                }
                layer.smooth: true
                layer.enabled: true
                layer.effect: DropShadow {
                    color: "grey"
                    transparentBorder: true
                    horizontalOffset: 0
                    verticalOffset: 2
                }
            }
    
            // Circular background without gradient
            Rectangle {
                width: circularShape_width
                height: circularShape_height
                radius: circularShape_height/2
                color: rightGradientColor
                layer.smooth: true
                layer.enabled: true
                layer.effect: DropShadow {
                    color: "grey"
                    transparentBorder: true
                    horizontalOffset: 0
                    verticalOffset: 2
                }
            }
        }
    }
    

    I can able to achieve this by using a normal gradient by rotating the Rectangle by 90degrees. But as per the intention of the linear gradient's usage same thing can be achieved. Or to achieve as expected any tweaks do we need to follow? Thanks in advance.

    KillerSmathK 1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by
      #2

      Hi @R_ram , could you please send the expected image or expected result which you need?

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      1 Reply Last reply
      2
      • R_ramR R_ram

        Hi Developers,

        I'm trying to get some circular component having the colour gradient in a horizontal manner and having some shadow effects. I tried the below way but it's not as expected. Can someone explain why is it happening like this? Result image attached.

        0_1559188924474_Screenshot from 2019-05-30 09-31-40.png

        // Code goes here

        import QtQuick 2.9
        import QtQuick.Window 2.2
        import QtQuick.Controls 2.1
        import QtGraphicalEffects 1.0
        
        Window {
            visible: true
            width: 680
            height: 480
            title: qsTr("LinearGradient")
        
            property real circularShape_width: 50
            property real circularShape_height: 50
            property color leftGradientColor: "#F0EFEE"
            property color rightGradientColor: "lightgrey"
        
            Row {
                anchors.centerIn: parent
                spacing: 20
        
                // Circular background with gradient
                Rectangle {
                    id:rect
                    width: circularShape_width
                    height: circularShape_height
                    radius: circularShape_height/2
                    LinearGradient {
                        source: rect
                        anchors.fill: rect
                        start: Qt.point(0, parent.height/2)
                        end: Qt.point(width, parent.height/2)
                        gradient: Gradient {
                            GradientStop { position: 0.0; color: leftGradientColor}
                            GradientStop { position: 1.0; color: rightGradientColor}
                        }
                    }
                    layer.smooth: true
                    layer.enabled: true
                    layer.effect: DropShadow {
                        color: "grey"
                        transparentBorder: true
                        horizontalOffset: 0
                        verticalOffset: 2
                    }
                }
        
                // Circular background without gradient
                Rectangle {
                    width: circularShape_width
                    height: circularShape_height
                    radius: circularShape_height/2
                    color: rightGradientColor
                    layer.smooth: true
                    layer.enabled: true
                    layer.effect: DropShadow {
                        color: "grey"
                        transparentBorder: true
                        horizontalOffset: 0
                        verticalOffset: 2
                    }
                }
            }
        }
        

        I can able to achieve this by using a normal gradient by rotating the Rectangle by 90degrees. But as per the intention of the linear gradient's usage same thing can be achieved. Or to achieve as expected any tweaks do we need to follow? Thanks in advance.

        KillerSmathK Offline
        KillerSmathK Offline
        KillerSmath
        wrote on last edited by
        #3

        @R_ram

        You cannot set the Source Parent of a LinearGradient as itself parent. It will cause a recursive redraw effect.

        Further, Dropshahow effect causes a conflict with the gradient.

        Solution: Separe your shape and effects and made into a common container.

        import QtQuick.Controls 2.1
        import QtGraphicalEffects 1.0
        
        Window {
            visible: true
            width: 680
            height: 480
            title: qsTr("LinearGradient")
        
            property real circularShape_width: 50
            property real circularShape_height: 50
            property color leftGradientColor: "#F0EFEE"
            property color rightGradientColor: "lightgrey"
        
            Row {
                anchors.centerIn: parent
                spacing: 20
        
                // Circular background with gradient
        
                // Item Container
                Item{
                    width: circularShape_width
                    height: circularShape_height
        
                    // Shape Item -> Container Item
                    Rectangle {
                        visible: false
                        id: rect
                        anchors.fill: parent
                        radius: height/2
                    }
        
                    // Gradient Item -> Shape Item
                    LinearGradient {
                        id: mask
                        source: rect
                        anchors.fill: parent
                        start: Qt.point(0, rect.height/2)
                        end: Qt.point(rect.width, rect.height/2)
                        gradient: Gradient {
                            GradientStop { position: 0.0; color: leftGradientColor}
                            GradientStop { position: 1.0; color: rightGradientColor}
                        }
                    }
        
                    // Shadow Effect -> Container Item
                    layer.smooth: true
                    layer.enabled: true
                    layer.effect: DropShadow {
                        color: "grey"
                        transparentBorder: true
                        horizontalOffset: 0
                        verticalOffset: 2
                    }
                }
        
                // Circular background without gradient
                Rectangle {
                    width: circularShape_width
                    height: circularShape_height
                    radius: circularShape_height/2
                    color: rightGradientColor
                    layer.smooth: true
                    layer.enabled: true
                    layer.effect: DropShadow {
                        color: "grey"
                        transparentBorder: true
                        horizontalOffset: 0
                        verticalOffset: 2
                    }
                }
            }
        }
        

        picture

        Note: LinearGradient's parent is not the shape (rect).

        @Computer Science Student - Brazil
        Web Developer and Researcher
        “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

        KillerSmathK 1 Reply Last reply
        7
        • KillerSmathK KillerSmath

          @R_ram

          You cannot set the Source Parent of a LinearGradient as itself parent. It will cause a recursive redraw effect.

          Further, Dropshahow effect causes a conflict with the gradient.

          Solution: Separe your shape and effects and made into a common container.

          import QtQuick.Controls 2.1
          import QtGraphicalEffects 1.0
          
          Window {
              visible: true
              width: 680
              height: 480
              title: qsTr("LinearGradient")
          
              property real circularShape_width: 50
              property real circularShape_height: 50
              property color leftGradientColor: "#F0EFEE"
              property color rightGradientColor: "lightgrey"
          
              Row {
                  anchors.centerIn: parent
                  spacing: 20
          
                  // Circular background with gradient
          
                  // Item Container
                  Item{
                      width: circularShape_width
                      height: circularShape_height
          
                      // Shape Item -> Container Item
                      Rectangle {
                          visible: false
                          id: rect
                          anchors.fill: parent
                          radius: height/2
                      }
          
                      // Gradient Item -> Shape Item
                      LinearGradient {
                          id: mask
                          source: rect
                          anchors.fill: parent
                          start: Qt.point(0, rect.height/2)
                          end: Qt.point(rect.width, rect.height/2)
                          gradient: Gradient {
                              GradientStop { position: 0.0; color: leftGradientColor}
                              GradientStop { position: 1.0; color: rightGradientColor}
                          }
                      }
          
                      // Shadow Effect -> Container Item
                      layer.smooth: true
                      layer.enabled: true
                      layer.effect: DropShadow {
                          color: "grey"
                          transparentBorder: true
                          horizontalOffset: 0
                          verticalOffset: 2
                      }
                  }
          
                  // Circular background without gradient
                  Rectangle {
                      width: circularShape_width
                      height: circularShape_height
                      radius: circularShape_height/2
                      color: rightGradientColor
                      layer.smooth: true
                      layer.enabled: true
                      layer.effect: DropShadow {
                          color: "grey"
                          transparentBorder: true
                          horizontalOffset: 0
                          verticalOffset: 2
                      }
                  }
              }
          }
          

          picture

          Note: LinearGradient's parent is not the shape (rect).

          KillerSmathK Offline
          KillerSmathK Offline
          KillerSmath
          wrote on last edited by
          #4

          @R_ram
          If you have no other issues related to the same topic, please change the topic to solved mode because other people can benefit of it.

          @Computer Science Student - Brazil
          Web Developer and Researcher
          “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

          1 Reply Last reply
          1
          • R_ramR Offline
            R_ramR Offline
            R_ram
            wrote on last edited by
            #5

            Hi @KillerSmath ,

            Thanks for your solution. It worked.

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved