如何编辑 QML PathPolyLine 路径属性？

Question

我对 QML PathPolyLine“路径”有疑问属性。在文档中说：

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

这是否意味着我可以像使用 JS 数组一样使用它？

这是一个示例，显示 .push() 不适用于“路径”属性，但我可以设置一个自定义数组，然后将我的自定义数组指定给“路径”属性的 PathPolyLine 元素。那么编辑这个属性的正确方法是什么？还为此属性设置别名，例如 property alias myArray: PathPolyLineID.path 以使用“myArray”而不影响“.path”。

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: []
  }
}

结果是这样的：

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)]

Answer 1

没有什么秘密，真的，只是根据Qt.point().

初始化一个新的JS数组和push()项

使用有效的数据范围并出于可视化目的显示它更容易测试它是否正常工作：

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
            }
        }
    }
}

使用此代码，单击按钮时呈现橙色三角形：

但是，您不能将元素推送到 PathPolyline 使用的默认数组中。在这种情况下，你能做的最好的事情就是像这样一次性初始化整个数组：

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);
}

如何编辑 QML PathPolyLine 路径属性？

How to edit QML PathPolyLine path property?

arrays

qt

alias

qml

如何编辑 QML PathPolyLine 路径 属性？

How to edit QML PathPolyLine path property?

arrays

qt

alias

qml

如何编辑 QML PathPolyLine 路径属性？