如何使用中继器将PathLine添加到ShapePath？

如何解决如何使用中继器将PathLine添加到ShapePath？

更新1 -我可以使用Javascript使其正常工作-但这似乎没有进行一些优化（激活后，使用qmlscene.exe的负载为2-3％至30％）-完成当模型发生变化（它从未增长）时是否会重新娱乐，这是唯一的方法还是有更多的“声明式”样式可用？

如何基于模型将PathLine添加到ShapePath？

• 我知道如何从项目外部使用中继器，但不知道如何在项目内部将其内爆
• 我在pathelements上需要某种Repeater-Delegate吗？
• 并且我不想使用Lineseries组件

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

更新1

$(document).ready(function(){
        let $finalrating;
         let $ratingCount; 
//if user wants to increase rating   
        $('.rating-link').on('click',function(){           
            $(this).children('.rating').addClass('fas');
            $(this).children('.rating').removeClass('far');
            $(this).parent('li').prevAll().find('.rating').addClass('fas');
            $(this).parent('li').prevAll().find('.rating').removeClass('far');
//if user wants to lower rating
            $(this).parent('li').prevAll().children('.rating-link').on('click',function(){ 
                $(this).parent('li').nextAll().find('.rating').addClass('far');
                $(this).parent('li').nextAll().find('.rating').removeClass('fas');
            });
            $ratingCount = $(this).parent('li').prevAll().find('.rating').length;                         
        });
        $finalrating = 1 + $ratingCount;  
        console.log($ratingCount);
        console.log($finalrating); 
    });

解决方法

您不能在该元素中使用转发器。
最有效的方法是使用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-如果您知道步骤，则可以预先声明所有PathLine，然后设置其运行时值。就像医疗监护仪上的心率线一样。

,

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