3
|
1 |
import Qt 4.7
|
|
2 |
|
|
3 |
// This is a Qt Quick component. The name of the component is defined by the
|
|
4 |
// name of the file (ie Cards).
|
|
5 |
|
|
6 |
// Here we have taken some SVG file from Open Clipart(http://www.openclipart.org/people/nicubunu) to
|
|
7 |
// demonstrate how to use the QML Flipable element. Think of two images. One a playing card. The
|
|
8 |
// other is simply a pattern representing back of a playing card. When the user taps on the
|
|
9 |
// Flipable element, it rotates and displays the other side of the card.
|
|
10 |
|
|
11 |
// The key point here is the transition from one state to another. We have to faces to the
|
|
12 |
// card: front and back.
|
|
13 |
|
|
14 |
Flipable {
|
|
15 |
id: container
|
|
16 |
|
|
17 |
property alias image: frontImage.source
|
|
18 |
property bool flipped: true
|
|
19 |
property int xAxis: 0
|
|
20 |
property int yAxis: 0
|
|
21 |
property int angle: 0
|
|
22 |
|
|
23 |
width: front.width; height: front.height
|
|
24 |
|
|
25 |
// callee will define the front image
|
|
26 |
front: Image { id: frontImage; smooth: true }
|
|
27 |
back: Image { source: "images/nicubunu_Card_backs_suits_red.svg"; smooth: true }
|
|
28 |
|
|
29 |
state: "back"
|
|
30 |
|
|
31 |
MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
|
|
32 |
|
|
33 |
transform: Rotation {
|
|
34 |
id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
|
|
35 |
axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
|
|
36 |
}
|
|
37 |
|
|
38 |
states: State {
|
|
39 |
name: "back"; when: container.flipped
|
|
40 |
PropertyChanges { target: rotation; angle: container.angle }
|
|
41 |
}
|
|
42 |
|
|
43 |
transitions: Transition {
|
|
44 |
ParallelAnimation {
|
|
45 |
NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
|
|
46 |
SequentialAnimation {
|
|
47 |
NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
|
|
48 |
NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
|
|
49 |
}
|
|
50 |
}
|
|
51 |
}
|
|
52 |
}
|