qml实现按钮水波纹显示

最新推荐文章于 2024-06-21 08:45:00 发布

_探索_

最新推荐文章于 2024-06-21 08:45:00 发布

阅读量200

点赞数

文章标签： ui

本文链接：https://blog.csdn.net/qq_27050303/article/details/130326199

版权

Rectangle {
        id: root
        anchors.centerIn: parent
        width: 200
        height: 100
        color: "green"

        Text {
            anchors.centerIn: parent
            text: "Hello Qt!"
            font.pixelSize: 36
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onPressed: {
                var posToTopLeft = Math.sqrt(Math.pow(mouseArea.mouseX, 2)+Math.pow(mouseArea.mouseY, 2))
                var posToTopRight = Math.sqrt(Math.pow(mouseArea.mouseX-root.width, 2)+Math.pow(mouseArea.mouseY, 2))
                var posToBottomLeft = Math.sqrt(Math.pow(mouseArea.mouseX, 2)+Math.pow(mouseArea.mouseY-root.height, 2))
                var posToBottomRight = Math.sqrt(Math.pow(mouseArea.mouseX-root.width, 2)+Math.pow(mouseArea.mouseY-root.height, 2))
                showRect.calWidth = Math.max(posToTopLeft, posToTopRight, posToBottomLeft, posToBottomRight)*2
                seqAni.restart()
            }
        }
    }

    Rectangle {
        id: mask
        anchors.fill: root
        color: "#50ffffff"
        visible: false

        Rectangle {
            id: showRect

            property real calWidth

            x: mouseArea.mouseX-width/2
            y: mouseArea.mouseY-height/2
            width: 10
            height: width
            radius: width/2
        }
    }

    SequentialAnimation {
        id: seqAni
        PropertyAction {
            target: mask
            property: "visible"
            value: "true"
        }

        PropertyAnimation {
            target: showRect
            property: "width"
            from: 10
            to: showRect.calWidth
            duration: 500
        }
    }

    OpacityMask {
          anchors.fill: root
          source: root
          maskSource: mask
      }