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. Fading to transparent gradient
QtWS25 Last Chance

Fading to transparent gradient

Scheduled Pinned Locked Moved Solved QML and Qt Quick
opacitymasktransparentgradient
3 Posts 2 Posters 2.9k Views
  • 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.
  • C Offline
    C Offline
    Cyna
    wrote on 5 Jun 2019, 15:54 last edited by
    #1

    Hi, I'm trying to create a dynamic item which edges are fading to transparent same like here https://www.getpaint.net/doc/latest/GradientTool.html (linear gradient example) alt text
    I've tried with opacityMask and LinearGradient but in LinearGradient I had to use specific color. At that example https://stackoverflow.com/a/48472948 it looks good as background is white, but in my case background doesnt have solid color.
    Do you have any ideas how that can be done?

    1 Reply Last reply
    0
    • J Offline
      J Offline
      Jacob.zhang
      wrote on 6 Jun 2019, 03:58 last edited by
      #2

      I think you want the result like this:
      0_1559793387953_微信截图_20190606115408.png

      import QtQuick 2.9
      import QtQuick.Window 2.3
      import QtGraphicalEffects 1.0
      
      Window {
          visible: true
          width: 500
          height: 500
          title: qsTr("Hello World")
      
          Image {
              source: "back.jpg"
          }
      
          Image {
              id: image
              anchors.centerIn: parent
              source: "image.jpg"
              visible: false
          }
      
          LinearGradient {
              id: mask
              anchors.fill: image
              start: Qt.point(0, 0)
              end: Qt.point(image.width, 0)
              gradient: Gradient {
                  GradientStop { position: 0.2; color: "transparent" }
                  GradientStop { position: 0.5; color: "white" }
                  GradientStop { position: 0.8; color: "transparent" }
              }
              visible: false
          }
      
          OpacityMask {
              anchors.fill: image
              source: image
              maskSource: mask
          }
      }
      
      C 1 Reply Last reply 6 Jun 2019, 08:47
      3
      • J Jacob.zhang
        6 Jun 2019, 03:58

        I think you want the result like this:
        0_1559793387953_微信截图_20190606115408.png

        import QtQuick 2.9
        import QtQuick.Window 2.3
        import QtGraphicalEffects 1.0
        
        Window {
            visible: true
            width: 500
            height: 500
            title: qsTr("Hello World")
        
            Image {
                source: "back.jpg"
            }
        
            Image {
                id: image
                anchors.centerIn: parent
                source: "image.jpg"
                visible: false
            }
        
            LinearGradient {
                id: mask
                anchors.fill: image
                start: Qt.point(0, 0)
                end: Qt.point(image.width, 0)
                gradient: Gradient {
                    GradientStop { position: 0.2; color: "transparent" }
                    GradientStop { position: 0.5; color: "white" }
                    GradientStop { position: 0.8; color: "transparent" }
                }
                visible: false
            }
        
            OpacityMask {
                anchors.fill: image
                source: image
                maskSource: mask
            }
        }
        
        C Offline
        C Offline
        Cyna
        wrote on 6 Jun 2019, 08:47 last edited by
        #3

        @Jacob.zhang That works, so visiblity do the trick. Thanks.

        1 Reply Last reply
        0

        3/3

        6 Jun 2019, 08:47

        • Login

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