如何使用 Repeater 将 PathLine 添加到 ShapePath？

Question

更新 1 - 我可以使用 Javascript 让它工作 - 但似乎有点未优化（从 2-3% 到 30% 负载qmlscene.exe 激活时）- 当模型发生变化时完全重新创建（它永远不会增长），这是唯一的方法还是有更多的“声明性”样式可用？

如何根据模型将 PathLine 添加到 ShapePath？

我知道如何在 Items 外部使用 Repeater，但不知道如何在 Items 内部使用 Repeater
我需要在 pathElements 上使用某种 Repeater-Delegate 吗？
而且我不想使用 LineSeries 组件

import QtQuick.Shapes 1.15
import QtQuick 2.15

Shape {
    ListModel {
        id: myPositions
        ListElement { x: 0; y:38 }
        ListElement { x: 10; y: 28 }
        ListElement { x: 20; y: 30 }
        ListElement { x: 30; y: 14 }
    }

    ShapePath {
        strokeColor: "black"
        strokeWidth: 1
        fillColor: "transparent"

        startX: 0
        startY: 0

        PathLine { x: 0; y: 38 }
        PathLine { x: 10; y: 28 }
        PathLine { x: 20; y: 30 }
        PathLine { x: 30; y: 14 }

//        Repeater {
//            model: myPositions
//            PathLine { x: model.x; y: model.y }
//        }
    }
}

更新 1

import QtQuick.Shapes 1.15
import QtQuick 2.15

Shape {
    ListModel {
        id: myPositions
    }

    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    Timer
    {
        interval: 100
        running: true
        repeat: true

        property real myX: 0

        onTriggered: {
            myPositions.append({"x":myX, "y":getRandomInt(0,30)})
            myX = myX + 10
        }
    }

    function createPathLineElements(positionsModel, shapePath)
    {
        var pathElements = []

        for (var i = 0; i < positionsModel.count; i++)
        {
            var pos = myPositions.get(i)
            var pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}',
                                              shapePath);
            pathLine.x = pos.x
            pathLine.y = pos.y
            pathElements.push(pathLine)
        }

        return pathElements
    }

    ShapePath {
        id: myPath

        strokeColor: "black"
        strokeWidth: 1
        fillColor: "transparent"

        startX: 0
        startY: 0

        pathElements: createPathLineElements(myPositions, myPath)
    }
}

Answer 1

您不能在该元素中使用中继器。
最高效的方法是使用 QQuickItem 来创建绘制增量路径的自定义项。
另一种更简单的方法是：

1- 使用 PathSvg 元素并设置其路径运行时，如下所示：

ShapePath {
    fillColor: "transparent"
    strokeColor: "red"
    capStyle: ShapePath.RoundCap
    joinStyle: ShapePath.RoundJoin
    strokeWidth: 3
    strokeStyle: ShapePath.SolidLine
    
    PathSvg { id: ps; path: parent.p }    //<== fill path property using js
    property string p: ""
    
    Component.onCompleted: {
        for ( var i = 0; i < myModel.count; i++) {
            p += "L %1 %2".arg(myModel.get(i).x).arg(myModel.get(i).y);
        }
        ps.path = p;
    }
}

2- 如果您知道步骤，那么您可以 pre-declare 所有 PathLine 然后在运行时设置它们的值。就像健康监护仪上的心率线。

Answer 2

使用 Instantiator:

Shape {
    ListModel {
        id: myPositions
    }

    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    Timer {
        interval: 100
        running: true
        repeat: true

        property real myX: 0

        onTriggered: {
            myPositions.append({"x":myX, "y":getRandomInt(0,30)})
            myX = myX + 10
        }
    }
    ShapePath {
        id: myPath
        fillColor: "transparent"
        strokeColor: "red"
        capStyle: ShapePath.RoundCap
        joinStyle: ShapePath.RoundJoin
        strokeWidth: 3
        strokeStyle: ShapePath.SolidLine
    }
    Instantiator {
        model: myPositions
        onObjectAdded: myPath.pathElements.push(object)
        PathLine {
            x: model.x
            y: model.y
        }
    }
}

如何使用 Repeater 将 PathLine 添加到 ShapePath？

how to add PathLine to ShapePath with a Repeater?

qt

repeater

shapes

qml