Tags

,

Surprise, a 360º degrees panorama with only a PathView.

Simple workaround

Rectangle {
    id: root
    width: 800
    height: 600
    clip: true

    property Image panorama: Image { source: "imgs/panorama1.png" }
    property int panWidth: panorama.width

    PathView {
        anchors.fill: parent
        model:2
        highlightRangeMode: "NoHighlightRange" // snap false
        flickDeceleration: 10

        delegate: Image{
            source: panorama.source
        }

        path: Path {
            startX: -panWidth/2; startY: root.height/2
            PathLine {x: panWidth + panWidth/2; y:root.height/2 }
        }
    }
}

King of workaround

I could not do exactly what I wanted, unfortunately PathView have a problem, flicking works only on long drags. So, I gave up to make a smoother motion in small drags, I applied only a Parallax, which turn the application very sexy.

Rectangle {
    id: root
    width: 800; height: 600
    clip: true

    property Image panorama: Image { source: "imgs/panorama1_frente.png" }
    property int panWidth: panorama.width

    PathView {
        id: pathPano
        anchors.fill: parent
        model:2
        highlightRangeMode: "NoHighlightRange" // snap false
        flickDeceleration: 20

        delegate: Item{
            width: panWidth
            height: panorama.height
            clip: true

            Image{
                source: "imgs/panorama1_bg.png"
                width: panWidth
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: PathView.pos
            }

            Image{
                anchors.horizontalCenter: parent.horizontalCenter
                source: panorama.source
            }

            Item{
                width: parent.width
                height: 50
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -PathView.pos

                Image{
                    x: 200; y: 100
                    source: "imgs/ballon.png"
                }

                Image{
                    x: 1000; y: 400
                    source: "imgs/boat.png"
                }
            }
        }

        path: Path {
            startX: -panWidth/2; startY: root.height/2
            PathAttribute { name: "pos"; value: 200 }
            PathLine {x: panWidth + panWidth/2; y:root.height/2 }
            PathAttribute { name: "pos"; value: -200 }
        }
    }
}

I had some help from George Tank Tavares, the Queen of QML, hehehehe … I’m kidding, it’s more like a QML Blacksmith.

Ah, in same cases is better running with -opengl. 🙂

GitHub Project

https://github.com/diegodotta/qml-panorama

Advertisements