Forums

OverviewFelgo 2 Support (Qt 5) › OpacityMask source image scale

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20796

    Phil

    Hello,

    I’ve created a button with an image for the background, and the image zooms in when the mouse hovers over it. However, I now want to give this button rounded corners. I’m using an OpacityMask to get this effect, but I can’t set the size and aspect ratio of the source image. Could you advise how to enable the zoom effect? Below is some sample code:

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
        Item {
            id: button
            clip: true
            anchors.centerIn: parent
            width: dp(200)
            height: dp(200)
    
            Image {
                id: img
                source: "../assets/test.png"
                height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.horizontalCenter: parent.horizontalCenter
                visible: false
                Behavior on height {
                    NumberAnimation {
                        duration: 500
                        easing.type: Easing.InOutSine
                    }
                }
            }
    
            OpacityMask {
                anchors.fill: parent
                source: img
                maskSource: mask
            }
    
            Rectangle {
                id: mask
                anchors.fill: parent
                radius: 0.05*height
                visible: false
            }
    
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: img.height = parent.height * 1.15
                onExited: img.height = parent.height
            }
        }
    }
    

    Thanks,

    Phil

    #20802

    Günther
    Felgo Team

    Hi Phil,

    I suggest to not animate the source image and height individually. I think it’s better to animate the parent item instead, which holds the mask along with the image.

    Best,
    Günther

    #20804

    Phil

    Hi Günter,

    Thanks for the suggestion, but I’m not sure how this would work in my case. Maybe I need to explain my issue a bit better. I want to achieve an effect like this: https://codepen.io/dwinnbrown/pen/kXEEAa, but with the button having rounded corners. The button should stay the same size, it is just the source image that would change.

    Thanks,

    Phil

    #20819

    Günther
    Felgo Team

    I see,

    in this case, I would animate the image, but apply the mask to the overall button.

    An easy way would be to directly apply the opacity mask to the parent, using the layer.effect property (it’s also less code for the effect then):

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
      Item {
        id: button
        clip: true
        anchors.centerIn: parent
        width: dp(200)
        height: dp(200)
    
        // apply roundned corners to button (not image)
        layer.enabled: true
        layer.effect: OpacityMask {
          maskSource: Rectangle {
            id: mask
            width: button.width
            height: button.height
            radius: 0.05*height
          }
        }
    
        Image {
          id: img
          source: "https://felgo.com/wp-content/themes/vplay/images/front-page/banner-qtc-designer.jpg"
          height: parent.height
          anchors.centerIn: parent
          fillMode: Image.PreserveAspectFit
          anchors.horizontalCenter: parent.horizontalCenter
          Behavior on height {
            NumberAnimation {
              duration: 500
              easing.type: Easing.InOutSine
            }
          }
        }
    
        MouseArea {
          anchors.fill: parent
          hoverEnabled: true
          onEntered: img.height = parent.height * 1.15
          onExited: img.height = parent.height
        }
      }
    }
    

    Best,
    Günther

Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support