I would imagine, it would be more cost effective (cpu and gpu time) if the Win Wheel was a PNG or JPG, especially when it comes to animation (spinning/slowing/stopping/etc). But how to build that using QtQML, good question!.
For instance, you could use the image you have given, this may well mean using something like Photoshop/GIMP/etc to get things looking how you want.
With regard to the animation; once you have your component image (the spinwheel), you can look at animation, here might be a good place to get started; https://qmlbook.github.io/ch01-meetqt/meetqt.html#digesting-a-user-interface
Using the very image you've provided, I put this together. It's a demo, not a complete app, but perhaps a good starting point?
Built using SailfishSDK on Sony Xperia 10 II Dual SIM. Screenshot directly from device.
Column {
id: column
spacing: 20
width: parent.width
anchors.centerIn: parent
Label {
text: "\u25BC"
font.pixelSize: 144
anchors.horizontalCenter: parent.horizontalCenter
}
Image {
id: wheel
source: "../images/win-wheel.png"
anchors.horizontalCenter: parent.horizontalCenter
PropertyAnimation on rotation {
id: spinAnimation
from: 0
to: 3610
duration: 10000
running: false
easing.type: Easing.InOutQuint
}
MouseArea {
anchors.fill: parent
onClicked: {
spinAnimation.running = true
timer.start()
label.opacity = 0.0
console.log(spinAnimation.duration)
}
}
}
Label {
id: hint
text: "Tap wheel to start"
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle {
width: wheel.width/2
radius: 20
height: 200
color: "white"
border {
width: 4
color: "green"
}
anchors.horizontalCenter: parent.horizontalCenter
Label {
id: label
//visible: false
opacity: 0.0
text: "WIN!"
color: "black"
font {
bold: true
pixelSize: 108
}
anchors.centerIn: parent
}
Timer {
id: timer
interval: spinAnimation.duration
running: false
repeat: true
onTriggered: {
label.opacity = 1.0
}
}
}
}
[image: 687a606d-0970-47b9-866e-958c72acfd87.png]
