我想模拟一本书的一页封闭.有关如何在qml中执行此操作的任何建议?
提前致谢
也许Flipable
,结合以下fillMode
财产Image
:
import QtQuick 2.0 import QtQuick.Window 2.0 Window { id: window width: 640 height: 480 visible: true Image { id: backgroundImage source: "http://www.thebookdesigner.com/wp-content/uploads/2013/04/pages-vs-spreads.png" anchors.centerIn: parent Flipable { id: flipable anchors.fill: parent anchors.leftMargin: parent.width / 2 property bool flipped: false front: Image { id: foldImage source: backgroundImage.source fillMode: Image.Pad width: foldImage.implicitWidth / 2 horizontalAlignment: Image.AlignRight } back: Image { source: backgroundImage.source width: foldImage.implicitWidth / 2 fillMode: Image.Pad horizontalAlignment: Image.AlignLeft } transform: Rotation { id: rotation origin.x: 0 origin.y: flipable.height / 2 axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis angle: 0 // the default angle } states: State { name: "back" PropertyChanges { target: rotation; angle: -180 } when: flipable.flipped } transitions: Transition { NumberAnimation { target: rotation property: "angle" duration: 1000 easing.type: Easing.InCubic } } MouseArea { anchors.fill: parent onClicked: flipable.flipped = !flipable.flipped } } } }
Flipable
按照它的名字所暗示的,并且该fillMode
属性与width
对于整个图像来说太小的属性允许您在项目的边界内"重新定位"图像的内容.
因此,front
项目包含图像的右侧,back
项目包含左侧.对于具有许多页面的实际书籍,您必须使用相关页面而不是相同页面.