How to make spin win whell?

? Offline

Hello I wan't make spin win whell but I don't have any idea about that. Which components should I use?

Example
alt text

Markkyboy

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
                }
            }
        }
    }