Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Is it possible to move a Pathview given a point (x, y) in qml via javascript?

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

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 977 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • N Offline
    N Offline
    nwoki
    wrote on 9 Jan 2015, 09:21 last edited by
    #1

    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?

    1 Reply Last reply
    0
    • S Offline
      S Offline
      shav
      wrote on 9 Jan 2015, 16:02 last edited by
      #2

      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.

      Mac OS and iOS Developer

      1 Reply Last reply
      0
      • N Offline
        N Offline
        nwoki
        wrote on 23 Jan 2015, 15:24 last edited by
        #3

        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

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved