Is it possible to move a Pathview given a point (x, y) in qml via javascript?



  • Hi all. I'm trying to figure out a way to make my PathView move as if it were dragged by a mouse (that is clicking on it and dragging it).

    My problem is that I need to do this from an external device (a sort of touch pad) that sends me the touch coordinates (x,y).

    What I want to achieve is a fluid movement of the PathView without working directly on the indexes which would not let me achieve the fluidity i need.

    Any ideas? Can anyone point me in the right direction?



  • Hi,

    You can use MouseArea with drag properties:
    @
    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2

    ApplicationWindow {
    id: rootApp
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    menuBar: MenuBar {
        Menu {
            title: qsTr("&File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: messageDialog.show(qsTr("Open action triggered"));
            }
            MenuItem {
                text: qsTr("E&xit")
                onTriggered: Qt.quit();
            }
        }
    }
    
    Rectangle {
        id: container
        width: 240; height: 200
    
        ListModel {
            id: contactModel
    
            ListElement {
                name: "Bill Jones"
                icon: "pics/qtlogo.png"
            }
            ListElement {
                name: "Jane Doe"
                icon: "pics/qtlogo.png"
            }
            ListElement {
                name: "John Smith"
                icon: "pics/qtlogo.png"
            }
        }
    
        Component {
            id: delegate
            Column {
                id: wrapper
                Image {
                    anchors.horizontalCenter: nameText.horizontalCenter
                    width: 64; height: 64
                    source: icon
                }
                Text {
                    id: nameText
                    text: name
                    font.pointSize: 16
                    color: wrapper.PathView.isCurrentItem ? "red" : "black"
                }
            }
        }
    
        PathView {
            id: pathViewItem
            anchors.fill: parent
            model: contactModel
            delegate: delegate
            path: Path {
                startX: 120; startY: 100
                PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
                PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
            }
    
            focus: true
            Keys.onLeftPressed: decrementCurrentIndex()
            Keys.onRightPressed: incrementCurrentIndex()
        }
    
        MouseArea {
            anchors.fill: parent
            drag.target: container
            drag.axis: Drag.XAxis | Drag.YAxis
            drag.minimumX: 0
            drag.maximumX: rootApp.width
        }
    }
    

    }
    @

    or if you need to use custom coordinates you can change property x and y of container element (from my example) with JS like:
    @
    container.x = point.x;
    container.y = point.y;
    @

    I hope that I have correctly understood your question.



  • Hi, sorry for the late reply. I looked at your code and no, it's not the effect i needed.

    What i needed was the rotation of the path view as if it were the mouse dragging it. I tried to obtain this effect by injecting the mouse movement into my application via c++ but it didn't give me the right feel so i went for a repeater item.

    I set the repeater to follow the arc i needed and acted upon its angle, thus obtaining the desired effect.

    Thankyou for your time


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.