问题描述
更新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
}
}
}