qml 实现图片旋转， 且鼠标可以拖动图片，鼠标点击在两幅图片间切换

Qt教程： 

qml 实现图片旋转，

且鼠标可以拖动图片，鼠标点击在两幅图片间切换

源码下载：http://download.csdn.net/detail/sinat_35523212/9600328

 

#include <QGuiApplication>

#include <QQmlApplicationEngine>

 

int main(int argc, char* argv[])

{

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

 

    return app.exec();

}

 

--------------------------------------------------------------

qml

 

import QtQuick 2.7

import QtQuick.Window 2.2

import QtQuick.Controls 2.0

 

ApplicationWindow {

    visible: true

    width: 800      // 宽高

    height:600

    color : "#260"  // 背景色

    title: "qzher-qmlTest"  // 标题

    property int n : 0  //定义变量

 

    Image {

        id: img

        source: "qrc:/av1.jpg"  // 要显示的图片

 

        RotationAnimation on rotation { // 旋转动画

                  loops: Animation.Infinite // 一直旋转

                  from: 0       // 从 0 - 360 度旋转

                  to: 360

                  duration: 3000        // 旋转一个周期需要三秒

              }

 

        MouseArea {     // 鼠标响应

            id: dragArea;

            anchors.fill: parent;   // 在父容器内才响应

            drag.target: img        // id为img的对象可以被拖动

            onClicked: {            // 点击事件

                console.debug("点击了图片")  // 打印信息

                if(0 == n){         // 根据变量切换图片

                 img.source="qrc:/ani.jpg";

                    n = 1

                }else{

                 img.source="qrc:/av1.jpg";

                    n=0;

                }

            }

 

        }

    }

}