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. Qt 6.5 MultiEffect for shadow
Forum Updated to NodeBB v4.3 + New Features

Qt 6.5 MultiEffect for shadow

Scheduled Pinned Locked Moved Solved QML and Qt Quick
11 Posts 5 Posters 4.9k Views 3 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.
  • M Offline
    M Offline
    mzimmers
    wrote on 15 May 2023, 22:55 last edited by
    #1

    Hi all -

    Trying to use the (relatively) new MultiEffect to create a drop shadow on a rectangle, and I can't quite get it to work.

    I want a simple drop shadow below the rectangle (nothing on the horizontal axis). Here's the code that gets me the closest to what I want:

    Rectangle {
        id: rect
        property int rectHeight: 100
        property int rectWidth: 100
        property int rectRadius: 10
        property int shadowSize: 10
        x: 100
        y: 100
        height: rectHeight
        width: rectWidth
        radius: rectRadius
        color: 'lightblue'
    }
    
    MultiEffect {
        source: rect
        anchors.fill: rect
        autoPaddingEnabled: false
        paddingRect: Qt.rect(0, rect.rectRadius * (-1), rect.rectWidth, rect.rectHeight)
        shadowBlur: 1.0
        shadowColor: 'black'
        shadowEnabled: true
        shadowVerticalOffset: rect.shadowSize
    }
    

    And here's what I get:
    shadow.JPG
    Can someone clue me in on what I'm doing wrong?

    Thanks...

    M P 2 Replies Last reply 16 May 2023, 10:49
    0
    • M Markkyboy
      1 Jun 2023, 14:44

      haha, I still cannot get a drop shadow despite using the code given. I have no idea what I'm missing.

      The code compiles and a blue rectangle is displayed, but still no shadow.

      M Offline
      M Offline
      mzimmers
      wrote on 13 Jul 2023, 17:51 last edited by
      #9

      I got this fixed - I set autoPaddingEnabled to true, and removed my paddingRect. Now seems to work property. Thanks to all who looked.

      E 1 Reply Last reply 24 Jul 2023, 18:25
      0
      • M mzimmers
        15 May 2023, 22:55

        Hi all -

        Trying to use the (relatively) new MultiEffect to create a drop shadow on a rectangle, and I can't quite get it to work.

        I want a simple drop shadow below the rectangle (nothing on the horizontal axis). Here's the code that gets me the closest to what I want:

        Rectangle {
            id: rect
            property int rectHeight: 100
            property int rectWidth: 100
            property int rectRadius: 10
            property int shadowSize: 10
            x: 100
            y: 100
            height: rectHeight
            width: rectWidth
            radius: rectRadius
            color: 'lightblue'
        }
        
        MultiEffect {
            source: rect
            anchors.fill: rect
            autoPaddingEnabled: false
            paddingRect: Qt.rect(0, rect.rectRadius * (-1), rect.rectWidth, rect.rectHeight)
            shadowBlur: 1.0
            shadowColor: 'black'
            shadowEnabled: true
            shadowVerticalOffset: rect.shadowSize
        }
        

        And here's what I get:
        shadow.JPG
        Can someone clue me in on what I'm doing wrong?

        Thanks...

        M Offline
        M Offline
        Markkyboy
        wrote on 16 May 2023, 10:49 last edited by
        #2

        @mzimmers - interesting. I've been wondering about the replacement for qtgraphicaleffects.

        Pasting your code doesn't give me the same result, I can't get the shadow to show at all. I don't find any examples online either, for other effects yes, but not explicitly shadow.

        I will keep playing when I have time and will post my findings.

        Don't just sit there standing around, pick up a shovel and sweep up!

        I live by the sea, not in it.

        M 1 Reply Last reply 16 May 2023, 13:02
        0
        • M Markkyboy
          16 May 2023, 10:49

          @mzimmers - interesting. I've been wondering about the replacement for qtgraphicaleffects.

          Pasting your code doesn't give me the same result, I can't get the shadow to show at all. I don't find any examples online either, for other effects yes, but not explicitly shadow.

          I will keep playing when I have time and will post my findings.

          M Offline
          M Offline
          mzimmers
          wrote on 16 May 2023, 13:02 last edited by
          #3

          @Markkyboy the example "MultiEffect Test Bed" has shadows. Like a lot of the Qt examples, it's a little hard to read, but maybe you can find what you're looking for there.

          1 Reply Last reply
          0
          • M Offline
            M Offline
            mzimmers
            wrote on 18 May 2023, 23:04 last edited by
            #4

            BTT.

            Anyone have any ideas?

            Thanks...

            1 Reply Last reply
            0
            • M mzimmers
              15 May 2023, 22:55

              Hi all -

              Trying to use the (relatively) new MultiEffect to create a drop shadow on a rectangle, and I can't quite get it to work.

              I want a simple drop shadow below the rectangle (nothing on the horizontal axis). Here's the code that gets me the closest to what I want:

              Rectangle {
                  id: rect
                  property int rectHeight: 100
                  property int rectWidth: 100
                  property int rectRadius: 10
                  property int shadowSize: 10
                  x: 100
                  y: 100
                  height: rectHeight
                  width: rectWidth
                  radius: rectRadius
                  color: 'lightblue'
              }
              
              MultiEffect {
                  source: rect
                  anchors.fill: rect
                  autoPaddingEnabled: false
                  paddingRect: Qt.rect(0, rect.rectRadius * (-1), rect.rectWidth, rect.rectHeight)
                  shadowBlur: 1.0
                  shadowColor: 'black'
                  shadowEnabled: true
                  shadowVerticalOffset: rect.shadowSize
              }
              

              And here's what I get:
              shadow.JPG
              Can someone clue me in on what I'm doing wrong?

              Thanks...

              P Offline
              P Offline
              petero3
              wrote on 1 Jun 2023, 12:39 last edited by
              #5

              Hi @mzimmers
              Is this the effect that you are looking for?
              Blur radiates outwards.
              Not sure if there is a specific way to make a blur effect be directional.
              But can cheat by making a second rect, smaller than the original rect, and creating a shadow from that instead.
              Probably want to tweak the x and width of the second rect.

              Btw. does MultiEffect work in the Design mode of Qt Creator for you, or also only at runtime? See my thread here:
              https://forum.qt.io/topic/145478/module-qtquick-effects-is-not-installed-in-design-mode-of-qt-creator

              Screenshot from 2023-06-01 13-32-42.png

              M 1 Reply Last reply 1 Jun 2023, 13:42
              1
              • P petero3
                1 Jun 2023, 12:39

                Hi @mzimmers
                Is this the effect that you are looking for?
                Blur radiates outwards.
                Not sure if there is a specific way to make a blur effect be directional.
                But can cheat by making a second rect, smaller than the original rect, and creating a shadow from that instead.
                Probably want to tweak the x and width of the second rect.

                Btw. does MultiEffect work in the Design mode of Qt Creator for you, or also only at runtime? See my thread here:
                https://forum.qt.io/topic/145478/module-qtquick-effects-is-not-installed-in-design-mode-of-qt-creator

                Screenshot from 2023-06-01 13-32-42.png

                M Offline
                M Offline
                mzimmers
                wrote on 1 Jun 2023, 13:42 last edited by
                #6

                @petero3 interesting workaround. I opened a bug report on this last week; haven't heard anything. If they don't respond next week, I'll probably use your workaround.

                Regarding design mode - I wasn't aware there was a way to look at QML code in design mode. In Creator, when I open a .qml file, the "Design" icon is disabled. How did you get into design mode?

                Thanks...

                P 1 Reply Last reply 1 Jun 2023, 14:01
                0
                • M mzimmers
                  1 Jun 2023, 13:42

                  @petero3 interesting workaround. I opened a bug report on this last week; haven't heard anything. If they don't respond next week, I'll probably use your workaround.

                  Regarding design mode - I wasn't aware there was a way to look at QML code in design mode. In Creator, when I open a .qml file, the "Design" icon is disabled. How did you get into design mode?

                  Thanks...

                  P Offline
                  P Offline
                  petero3
                  wrote on 1 Jun 2023, 14:01 last edited by
                  #7

                  Hi @mzimmers
                  Yes, not sure why it is a hidden feature.
                  To enable the Design button:
                  Select Help > About Plugins > Qt Quick > QmlDesigner.
                  https://doc.qt.io/qtcreator/creator-qtquickdesigner-plugin.html
                  Though for me, I only see the original rectangle, not the shadow. So I have to run your example to see the shadow instead.

                  1 Reply Last reply
                  1
                  • M Offline
                    M Offline
                    Markkyboy
                    wrote on 1 Jun 2023, 14:44 last edited by
                    #8

                    haha, I still cannot get a drop shadow despite using the code given. I have no idea what I'm missing.

                    The code compiles and a blue rectangle is displayed, but still no shadow.

                    Don't just sit there standing around, pick up a shovel and sweep up!

                    I live by the sea, not in it.

                    M 1 Reply Last reply 13 Jul 2023, 17:51
                    0
                    • M Markkyboy
                      1 Jun 2023, 14:44

                      haha, I still cannot get a drop shadow despite using the code given. I have no idea what I'm missing.

                      The code compiles and a blue rectangle is displayed, but still no shadow.

                      M Offline
                      M Offline
                      mzimmers
                      wrote on 13 Jul 2023, 17:51 last edited by
                      #9

                      I got this fixed - I set autoPaddingEnabled to true, and removed my paddingRect. Now seems to work property. Thanks to all who looked.

                      E 1 Reply Last reply 24 Jul 2023, 18:25
                      0
                      • M mzimmers has marked this topic as solved on 13 Jul 2023, 17:52
                      • M mzimmers
                        13 Jul 2023, 17:51

                        I got this fixed - I set autoPaddingEnabled to true, and removed my paddingRect. Now seems to work property. Thanks to all who looked.

                        E Offline
                        E Offline
                        ekkescorner
                        Qt Champions 2016
                        wrote on 24 Jul 2023, 18:25 last edited by
                        #10

                        @mzimmers thx for your example.
                        I used DropShadow on a customized Button with Image as content.
                        I had to add z:2 for the contentItem - otherwise the background was on top of the Image.
                        here's my example:

                        Button {
                            id: button
                            property alias imageSource: contentImage.source
                            property alias backgroundColor: buttonBackground.color
                            property bool showShadow: false
                            focusPolicy: Qt.NoFocus
                            contentItem:
                                Item {
                                z: 2 // without z:2 the Image is not visible !
                                implicitHeight: 24
                                implicitWidth: 24
                                Image {
                                    id: contentImage
                                    anchors.centerIn: parent
                                }
                            }
                            background:
                                Rectangle {
                                id: buttonBackground
                                implicitWidth: 48
                                implicitHeight: 48
                                color: primaryColor
                                radius: width / 2
                                opacity: button.pressed ? 0.5 : 1.0
                            }
                            MultiEffect {
                                source: buttonBackground
                                anchors.fill: buttonBackground
                                autoPaddingEnabled: true
                                shadowBlur: 1.0
                                shadowEnabled: button.showShadow
                                shadowVerticalOffset: 3
                                shadowHorizontalOffset: 1
                                opacity: button.pressed ? 0.75 : 1.0
                            }
                        }
                        

                        ekke ... Qt Champion 2016 | 2024 ... mobile business apps
                        5.15 --> 6.9 https://t1p.de/ekkeChecklist
                        QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

                        1 Reply Last reply
                        0
                        • C Offline
                          C Offline
                          coconoriko
                          wrote 28 days ago last edited by coconoriko
                          #11

                          If your shadow is cut off, I recommend to choose a bigger padding rect. What was a surprise for me - the x and y should be positive numbers if you want the rectangle to "wrap" top left corner too.
                          Try something like:

                          paddingRect: Qt.rect(100, 100, 300, 300)

                          The size should be as small as possible though, cause it affects performance.

                          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