Qml 如何仅旋转图像的右侧或左侧部分

我想模拟一本书的一页的关闭。 关于如何在qml中实现这一点，有什么建议吗

请提前感谢

也许，结合

图像的属性

：

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

属性与对整个图像来说太小的

宽度相结合，允许您在项目范围内“重新定位”图像内容

因此，
front
项包含图像的右侧，
back
项包含图像的左侧。如果一本书有很多页，你就必须使用相关的页而不是同一页