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