Comment faire pivoter uniquement la partie droite ou gauche d'une image

Question

Je souhaite simuler la fermeture d'une page d'un livre. Des suggestions sur la façon de faire cela en qml?

Merci à l'avance

Answer 1

Peut-être Flipable, en combinaison avec la propriété fillMode de 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 fait ce que son nom l'indique, et la propriété fillMode en combinaison avec un width qui est trop petit pour l'image entière vous permet de "repositionner" le contenu de la L'image dans les limites de l'objet. L'élément front contient donc le côté droit de l'image et l'élément back contient le côté gauche. Avec un livre réel qui a beaucoup de pages, vous devez utiliser les pages pertinentes au lieu du même.