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

Question

我想模拟一本书一页的合上。关于如何在 qml 中执行此操作的任何建议？

提前致谢

Answer 1

也许 Flipable, in combination with the 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 组合允许您 "reposition" 项目范围内的图像内容。

因此，front 项包含图像的右侧，back 项包含图像的左侧。对于有很多页的实际书籍，您必须使用相关页面而不是同一页。

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

How to rotate only the right or left part of an image

qml

qt-quick

qtquick2