Qml图片旋转

       在qt开发中有时需要实现图片的各种动作与动画特效，比如说图片旋转，或者只显示45度的一部分等，而用Qml实现起来就比较简洁，下面看具体的代码实现：

 

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 600
    height: 480
    color: "green"
    title: qsTr("Hello World")

    Image {
        id: loginImage
        width: 80; height: 80;
        source: "qrc:/res/bb.png";
        visible: true
    }

    Image {
        id: loginSucessImage
        width: 80; height: 80;
        source: "qrc:/res/aa.png";
        visible: false
        Text{
            id: timeText
            text: "00:12:34"
            color: "red"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    NumberAnimation{
        id: numberAnimation
        target: loginImage
        duration: 1000;
        loops: Animation.Infinite
        from: 0
        to: 360
        property: "rotation"
    }

    Rectangle {
        id: startRect
        width: 50; height: 50;
        color: "red"
        anchors.top: parent.top;
        anchors.topMargin: 1;
        anchors.left: parent.left;
        anchors.leftMargin: 100
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                loginImage.visible = true;
                loginSucessImage.visible = false;
                numberAnimation.start();
            }
        }
    }

    Rectangle {
        id: stopRect
        width: 50; height: 50;
        color: "blue"
        anchors.top: parent.top;
        anchors.topMargin: 1;
        anchors.left: parent.left;
        anchors.leftMargin: 150
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                numberAnimation.stop();
                loginImage.visible = false;
                loginSucessImage.visible = true;
            }
        }
    }
    //显示弹框
    Rectangle {
        id: showPopupRect
        width: 50; height: 50;
        color: "blue"
        anchors.top: parent.top;
        anchors.topMargin: 100;
        anchors.left: parent.left;
        anchors.leftMargin: 150
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                userInfo.show()
                //myPopup.open()
            }
        }
    }

    //自定义的弹框，带三角尖
    UserInfoPopup {
        id: userInfo
        backgroundWidth: 200
        backgroundHeight: 180
        anchors.left: parent.left;
        anchors.leftMargin: 200
        anchors.top: parent.top;
        anchors.topMargin: 50;
        barColor: "red"
    }

//    Popup {
//        id: myPopup
//        x: 150
//        y: 100
//        width: 200;
//        height: 200
//        modal: true
//        focus: true
//        //closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
//    }

}

 UserInfoPopup.qml

import QtQuick 2.12
import QtQuick.Controls 2.5

Item {
    id: root
    anchors.fill: parent
    property alias popupVisible: popup.visible
    property alias contentItem: popup.contentItem
    property color barColor: "white"
    property alias backgroundItem: background
    property real backgroundWidth: 200
    property real backgroundHeight: 160
    property color borderColor:  barColor
    property real borderWidth: 0
    property real verticalOffset: 20

    //矩形旋转45度，一半被toolTip遮住(重合)，另一半三角形和ToolTip组成一个带箭头的ToolTip
    Rectangle {
        id: bar
        visible: popup.visible
        rotation: 45
        width: 20; height: 20
        color: barColor
        //水平居中
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 40
        //垂直方向上，由ToolTip的y值，决定位置
        //anchors.verticalCenter: parent.bottom;
        //anchors.verticalCenterOffset: verticalOffset
    }

    Popup {
        id: popup
        width: backgroundWidth
        height: backgroundHeight;
        modal: true
        background: Rectangle {
            id: background
            color: barColor
            radius: 8
            border.color: borderColor
            border.width: borderWidth
        }
    }

    function show() {
        popup.x = (root.width - popup.width) / 2
        //popup.y = root.height + verticalOffset
        popup.y =  50
        popupVisible = true;
        console.log("popupVisible=================" + popupVisible + "popup.x===" + popup.x + "  popup.y==" + popup.y);
    }
    function hide() {
        popupVisible = false;
    }
}

运行结果：

 

参考

https://www.cnblogs.com/surfsky/p/3998391.html