Hi All,
I’m trying to create a ‘path’ that follows a point on screen. There’s usually other content on the screen scrolling past, so the x-pos of the path is modified to give the same effect. My first thought was to use a LineItem.
Below is an example program, try dragging the black rectangle:
import Felgo 3.0
import QtQuick 2.0
App {
id: gameWindow
NavigationStack {
Page {
id: page
Rectangle {
id: rect
width: 25
height: 25
color: "black"
x: page.width / 2
y: page.height / 2
Drag.active: dragArea.drag.active
MouseArea {
id: dragArea
anchors.fill: parent
drag.axis: Drag.YAxis
drag.target: parent
}
}
LineItem {
id: path
color: "black"
lineWidth: 5
points: []
property int resolution: 50
Timer {
interval: 50; repeat: true; running: true; triggeredOnStart: true
onTriggered: {
if (path.points.length > path.resolution)
{
path.points.shift()
}
var xVelocity = 20 // pixels per sec
var pixelAdjust = xVelocity * (interval / 1000)
path.x -= pixelAdjust
var point = {"x": -path.x + rect.x + rect.width / 2, "y": rect.y + rect.height / 2}
path.points.push(point)
var newPoints = path.points
path.points = newPoints
}
}
}
}
}
}
Notice how a line is rendered providing a view of the previous positions of the rectangle, in a sense the path of the rectangle.
It works fine in the first instance, but I found that if you drag it up and down rapidly from top to bottom of the page everything slows down a lot but eventually catches up.
I’ve tried lots of different variations to speed things up, including rolling my own Canvas/Context2D version but nothing gives the desired effect with performance in mind.
Can anyone suggest what the problem might be or a better way to go about such an effect?
Many thanks!