PathView: disable dragging/flicking between certain path elements because of wrong direction?



  • Hi,
    I want a PathView to rotate its 5 items on a circle (or actually a triangle) around the y-axis. See this screenshot:
    0_1533814271121_PathView.png
    So they all should have the same y-value (y=300 in the example code below) on every path position. I realized that this doesn't work: the items started flickering while being dragged. So I had to change some values to 299 and 298. Now I still got the problem, that the items move to the wrong direction, if I touch them in the upper half to flick or drag them. If I touch them in the lower half, they move to the correct direction. I assume the reason is, that the PathView thinks I want to drag an item along the path (800|298)->(100|298) (blue and yellow rectangle in the screenshot) although I touch the front item (red rectangle).
    If it's not clear what my problem is, try the code below.

    Is it possible to disable dragging and flicking for that specific path section? How?
    Or is there a different solution? If I move my finger to the right, I want the items to move right at the front and left at the back, as displayed in the screenshot. No matter if I touch the upper or lower half.
    Sadly none of the other path elements (PathQuad, PathCubic etc.) contains a z-value.

    Rectangle {
            x: 50; y: 50
            width: 900; height: 600
            color: "grey"
    
            PathView {
                id: pathView
                anchors.fill: parent
                model: myModel
                delegate: myDelegate
                dragMargin: 300
                path: Path {
                    startX: 450; startY: 300
                    PathAttribute { name: "elementScale"; value: 1.0 }
                    PathAttribute { name: "elementZ"; value: 2 }
    
                    PathLine { x: 650; y: 299 }
                    PathPercent { value: 0.2 }
                    PathAttribute { name: "elementScale"; value: 0.7 }
                    PathAttribute { name: "elementZ"; value: 1 }
    
                    PathLine { x: 800; y: 298 }
                    PathPercent { value: 0.4 }
                    PathAttribute { name: "elementScale"; value: 0.5 }
                    PathAttribute { name: "elementZ"; value: 0 }
    
                    // adding this just inverts the drag/flick direction between upper and lower half
                    /*PathLine { x: 450; y: 301 }
                    PathPercent { value: 0.5 }
                    PathAttribute { name: "elementScale"; value: 0.5 }
                    PathAttribute { name: "elementZ"; value: -1 }*/
    
                    PathLine { x: 100; y: 298 }
                    PathPercent { value: 0.6 }
                    PathAttribute { name: "elementScale"; value: 0.5 }
                    PathAttribute { name: "elementZ"; value: 0 }
    
                    PathLine { x: 250; y: 299 }
                    PathPercent { value: 0.8 }
                    PathAttribute { name: "elementScale"; value: 0.7 }
                    PathAttribute { name: "elementZ"; value: 1 }
    
                    PathLine { x: 450; y: 300 }
                    PathPercent { value: 1.0 }
                }
            }
    
            Component {
                id: myDelegate
                Rectangle {
                    width: 400; height: 600
                    color: modelColor
    
                    scale: PathView.elementScale
                    z: PathView.elementZ
                }
            }
    
            ListModel {
                id: myModel
                ListElement  {
                    modelColor: "red"
                }
                ListElement  {
                    modelColor: "green"
                }
                ListElement  {
                    modelColor: "blue"
                }
                ListElement  {
                    modelColor: "yellow"
                }
                ListElement  {
                    modelColor: "orange"
                }
            }
    
            Rectangle {
                width: parent.width; height: 1
                y: 300
                color: "black"
            }
        }
    


  • I just thought of maybe adding a MouseArea above the upper half and somehow redirect its events to the PathView. But this way I will probably lose the flick functionality, and furthermore one of those 5 rectangles will contain a MultiTouchArea, so that's no solution, I think. (Yeah I won't be able to drag/flick the items when starting my touch inside the MultiTouchArea.)



  • @Andreas-P
    Your path def is unnecessarily complicated. The code below does what you are trying to achieve, it seems?

    What about something like:

    Rectangle {
            x: 50; y: 50
            width: 900; height: 600
            color: "grey"
    
            PathView {
                id: pathView
                anchors.fill: parent
                model: myModel
                delegate: myDelegate
                dragMargin: 300
    
                snapMode: PathView.SnapToItem
                maximumFlickVelocity: width
    
                preferredHighlightBegin:0.5
                preferredHighlightEnd:0.5
    
                clip: true
    
                path: Path {
                    id:flowViewPath
    
                    readonly property real yCoord: pathView.height/2
    
                    startX: 0
                    startY: flowViewPath.yCoord
    
                    PathAttribute{name:"elementZ"; value: 0}
                    PathAttribute{name:"elementScale"; value: 0.3}
    
                    PathLine {
                        x: pathView.width*0.5
                        y: flowViewPath.yCoord
                    }
    
                    PathAttribute{name:"elementZ";value:100}
                    PathAttribute{name:"elementScale";value:1.0}
    
                    PathLine {
                        x: pathView.width
                        y: flowViewPath.yCoord
                    }
    
                    PathAttribute{name:"elementZ";value:0}
                    PathAttribute{name:"elementScale";value:0.3}
    
                    PathPercent{value:1.0}
                }
            }
    
            Component {
                id: myDelegate
                Rectangle {
                    width: 400; height: 600
                    color: modelColor
    
                    scale: PathView.elementScale
                    z: PathView.elementZ
                }
            }
    
            ListModel {
                id: myModel
                ListElement  {modelColor: "red"}
                ListElement  {modelColor: "green"}
                ListElement  {modelColor: "blue"}
                ListElement  {modelColor: "yellow"}
                ListElement  {modelColor: "orange"}
            }
    
            Rectangle {
                width: parent.width;
                height: 1
                x: 0
                y: flowViewPath.yCoord
                color: "black"
            }
        }
    


  • Yes, this indeed does what I wanted to do. It's the first time I'm working with a PathView and it looks like I thought too complicated. Thank you very much!



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