Can I controll the attachment point of a delegate to a PathView in QML?

Question

I'm trying to wrap my head around PathViews in QtQuick. I have no difficulty creating a PathView and an appropriate delegate, so that those delegates are rendered "along the path". However, I can't find any definition of what this "along" implies, i.e. how the delegates are attached to the path. Consider following example with a path going through the vertical center of the page:

import QtQuick 2.8
import QtQuick.Controls 2.1

ApplicationWindow {

    visible: true
    id: app
    width: 1280
    height: 720
    color: "#330000"

    PathView {
        id: pathView
        anchors.fill: parent
        model: 6

        delegate: Rectangle {
            id: item
            height: app.height * 0.5
            width: app.width * 0.25

            border.width: 5
            border.color: "#2f2f2f"
            color: "#d2d2d2"

            scale: PathView.itemscale
            z: PathView.z
        }

        interactive: true

        pathItemCount: 5
        preferredHighlightEnd: 0.5
        preferredHighlightBegin: 0.5

        path: Path {        
            startX: 0
            startY: app.height * 0.5

            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "itemscale"; value: 0.5 }

            PathLine {
                x: app.width * 0.5
                y: app.height * 0.5
            }

            PathAttribute { name: "z"; value: 100 }
            PathAttribute { name: "itemscale"; value: 1 }

            PathLine {
                x: app.width
                y: app.height * 0.5
            }

            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "itemscale"; value: 0.5 }
        }
    }
}

This code produces this rendering:

The items on the path are obviously attached to their vertical center, without clear indication whether the horizontal center is also involved.

Now I would like to position the items on top of the path, i.e. the rectangles should be bottom-aligned with their bottom border being in the center of the screen. In other words, I would like to attach them by the bottom anchor instead of the center.

The Qt documentation is no big help there. Can I accomplish this without vicious hacking and if so how do I do that?

Answer 1

The problem in your case is caused by scale, if we comment that line we get the following:

and it is observed that it is aligned. The Scale uses a point of reference called transformOrigin which by default is the Item.Center of the item, in your case it should be the Item.Bottom.

Making the following change:

delegate: Rectangle {
    id: item
    height: app.height * 0.5
    width: app.width * 0.25
    y:0

    border.width: 5
    border.color: "#2f2f2f"
    color: "#d2d2d2"

    scale: PathView.itemscale
    transformOrigin: Item.Bottom // +++
    z: PathView.z
}

is obtained: