Question

我想模拟一本书的一页封闭。有关如何在qml中执行此操作的任何建议吗？

提前致谢

Answer 1

或许Flipable，结合Image的{{3}}属性：

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
            }
        }
    }
}

fillMode

Flipable正如其名称所暗示的那样，fillMode属性与width相结合，对于整个图像而言太小，可让您“重新定位”图像的内容在该项目的范围内。

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

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

1 个答案: