当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何仅旋转图像的右侧或左侧部分》经验,为你挑选了1个好方法。

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

提前致谢



1> Mitch..:

也许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项目包含左侧.对于具有许多页面的实际书籍,您必须使用相关页面而不是相同页面.

推荐阅读
李桂平2402851397
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有