画像の右または左の部分だけを回転する方法

Question

本の1ページの閉鎖をシミュレートしたいと思います。 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アイテムには左側が含まれます。多くのページがある実際の本では、同じページの代わりに関連するページを使用する必要があります。