Add QmlFlipImage

Author: zhengtianzuo

QmlFlipImage/QmlFlipImage.pro

@@ -0,0 +1,13 @@
+#-------------------------------------------------
+#
+# Copyright (C) 2003-2103 CamelSoft Corporation
+#
+#-------------------------------------------------
+
+QT += qml quick
+
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc

QmlFlipImage/images/1.jpg

@@ -0,0 +1,22 @@
+/*!
+ *@file main.cpp
+ *@brief 程序主文件
+ *@version 1.0
+ *@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
+ *@author zhengtianzuo
+*/
+#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")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}

QmlFlipImage/images/2.jpg

@@ -0,0 +1,92 @@
+/*!
+ *@file main.qml
+ *@brief 主文件
+ *@version 1.0
+ *@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
+ *@author zhengtianzuo
+*/
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+ApplicationWindow {
+    id: root
+    visible: true
+    width: 400
+    height: 400
+    title: qsTr("Qml翻转效果")
+
+    Flipable{
+        id: flip
+        width: 300
+        height: 300
+        anchors.centerIn: parent
+
+        property bool flipped: false
+
+        front:Image{
+            anchors.fill: parent
+            source: "qrc:/images/1.jpg"
+        }
+
+        back:Image{
+            anchors.fill: parent
+            source: "qrc:/images/2.jpg"
+        }
+
+        transform: Rotation{
+            id: rotation
+            origin.x: flip.width / 2
+            origin.y: flip.height / 2
+            axis.x: rx.checked
+            axis.y: ry.checked
+            axis.z: rz.checked
+            angle: 0
+        }
+
+        states:State{
+            PropertyChanges {
+                target: rotation
+                angle:180
+            }
+            when:flip.flipped
+        }
+
+        transitions: Transition{
+            NumberAnimation{
+                target:rotation
+                properties: "angle"
+                duration:1000
+            }
+        }
+    }
+
+    Row{
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 6
+
+        RadioButton{
+            id: rx
+            height: 24
+            text: qsTr("X轴")
+            checked: true
+        }
+
+        RadioButton{
+            id: ry
+            height: 24
+            text: qsTr("Y轴")
+        }
+
+        RadioButton{
+            id: rz
+            height: 24
+            text: qsTr("Z轴")
+        }
+        Button{
+            height: 24
+            text: qsTr("翻转")
+            onClicked: flip.flipped = !flip.flipped
+        }
+    }
+}

QmlFlipImage/main.cpp

@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>images/1.jpg</file>
+        <file>images/2.jpg</file>
+    </qresource>
+</RCC>

QmlFlipImage/main.qml

@@ -28,4 +28,5 @@ SUBDIRS += QmlTextEditScrollBar
 SUBDIRS += QmlToggleButton
 SUBDIRS += QmlCircularProgress
 SUBDIRS += QmlFontList
+SUBDIRS += QmlFlipImage
 

QmlFlipImage/qml.qrc

@@ -122,3 +122,8 @@ QmlFontList: Qml获取字体列表
 
 ![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlFontList/show.gif?raw=true)
 
+
+QmlFlipImage: Qml翻转效果
+
+![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlFlipImage/show.gif?raw=true)
+