How to edit QML PathPolyLine path property?

user_7651851 0
Viewed 73

I have an issue with QML PathPolyLine "path" property. In documentation it said that:

It can be a JS array of points constructed with Qt.point()

Does it mean I can work with it like with JS array?

Here is an example that shows that .push() doesn't work for it "path" property, but I can set a custom array and then appoint my custom array to "path" property of PathPolyLine element. So what is the correct way of editing this property? Also setting alias to this property like this property alias myArray: PathPolyLineID.path to work with "myArray" not affecting ".path" too.

main.qml

import QtQuick
import QtQuick.Controls

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

  property var points: []

  Button
  {
    property int i: 0
    id: btnID
    text: "Click Me!"
    onClicked:
    {
      if (i == 2) pplID.path = mainWinID.points;
      pplID.path.push(Qt.point(i,i+10));
      mainWinID.points.push(Qt.point(i,i+10));
      console.log('pplID.path:', pplID.path);
      console.log('mainWinID.points:', mainWinID.points);
      i++;
    }
  }

  PathPolyline
  {
    id: pplID
    path: []
  }
}

Outcome is such:

qml: pplID.path: []
qml: mainWinID.points: [QPointF(0, 10)]
qml: pplID.path: []
qml: mainWinID.points: [QPointF(0, 10),QPointF(1, 11)]
qml: pplID.path: [QPointF(0, 10),QPointF(1, 11)]
qml: mainWinID.points: [QPointF(0, 10),QPointF(1, 11),QPointF(2, 12)]
qml: pplID.path: [QPointF(0, 10),QPointF(1, 11)]
qml: mainWinID.points: [QPointF(0, 10),QPointF(1, 11),QPointF(2, 12),QPointF(3, 13)]
qml alias qt arrays
1 Answers

There isn't any secrets, really, just initialize a new JS array and push() items based on Qt.point().

It's easier to test if it's working or not using a valid data range and displaying it for visualization purposes:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15

Window {
    id: mainWinID
    width: 640
    height: 480
    visible: true

    property var points: [ ]

    Button {
        id: btnID
        text: "Click Me!"

        onClicked: {
            // clear the JS array to delete existing points
            mainWinID.points = [ ]

            // initialize the JS array with data points
            mainWinID.points.push(Qt.point(320, 240));
            mainWinID.points.push(Qt.point(400, 360));
            mainWinID.points.push(Qt.point(260, 360));
            mainWinID.points.push(Qt.point(320, 240));

            console.log('mainWinID.points=', mainWinID.points)

            // use the array as the path for PathPolyline
            pplID.path = mainWinID.points;
        }
    }

    Shape {
        anchors.fill: parent
        anchors.centerIn: parent

        ShapePath {
            strokeWidth: 3
            strokeColor: "black"
            fillColor: "orange"
            fillRule: ShapePath.OddEvenFill

            PathPolyline {
                id: pplID
            }
        }
    }
}

Using this code, when the button is clicked an orange triangle is rendered:

However, you can't push elements into the default array used by PathPolyline. The best you can do in this case is initialize the entire array at once like this:

onClicked: {
    // initialize PathPolyline.path
    pplID.path = [ 
        Qt.point(320, 240), 
        Qt.point(400, 360), 
        Qt.point(260, 360), 
        Qt.point(320, 240) 
    ]

    console.log('pplID.path=', pplID.path);
}
user_1767690
Related