이미지의 오른쪽 또는 왼쪽 부분 만 회전하는 방법

Question

책 한 페이지의 폐쇄를 시뮬레이션하고 싶습니다. qml에서이를 수행하는 방법에 대한 제안 사항이 있으십니까? Image의 fillMode 특성과 함께 사전

Answer 1

아마도 Flipable에서

감사 :

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 전체 이미지에 비해 너무 작 으면 th의 내용을 "재배치"할 수 있습니다 전자 이미지를 표시합니다.

따라서 front 항목에는 이미지의 오른쪽이 포함되고 back 항목에는 왼쪽이 포함됩니다. 실제 책이 많은 페이지가있는 경우 동일한 페이지 대신 관련 페이지를 사용해야합니다.