drawing lines on a canvas and move them dynamically

[d_stranz]

If you make a custom item, you can create a cubic Bezier QPainterPath (see QPainterPath::cubicTo()) to draw your smooth curved lines. Start the path with QPainterPath::moveTo(), then add the spline from that point with cubicTo.

There is an example of how to create and use a custom QQuickPaintedItem here.

[smrati.johri]

thanks for the replies.

If you are using QtQuick as the UI stack, then you might want look into using a custom item, e.g. by deriving from QQuickPaintedItem and draw using the QPainter API.

yes we are panning to go ahead with QtQuick only, i am looking into QPainter, and trying to make a working sample. but i have a question.
Should i make the whole drawing at once and and then animating it will give me the expected behaviour or i need to calculate angles myself using the points and then redraw it everytime?

If you make a custom item, you can create a cubic Bezier QPainterPath (see QPainterPath::cubicTo()) to draw your smooth curved lines

i tried some sample code with bezierCurveTo() but then i realized that with constant control points i cant achieve the expected dynamic behaviour, also making different lines and then trying make a complete figure from them did not seem feasible to me, rather can say i felt that it would be a very crude way.
below is the sample code i tried
Canvas {
id: root
// canvas size
width: 800; height: 800
property bool arrowFormState: false
property real progress:0;
function toggle() {
arrowFormState = !arrowFormState
}

property real xLeft: collectPointsX(270)//50
property real yLeft: collectPointsY(270)

states: State {
when: arrowFormState
PropertyChanges { xLeft: collectPointsX(270); target: root }
PropertyChanges { yLeft: collectPointsY(270); target: root }
}
transitions: Transition {
NumberAnimation {
property: "xLeft";from:collectPointsX(240)
duration: 500
}
NumberAnimation {
property: "yLeft";from:collectPointsY(240)
duration: 500
}
}

onXLeftChanged: requestPaint();
// handler to override for drawing
onPaint: {
var ctx = getContext("2d")
ctx.fillRect(0, 0, width, height)
// setup the color
ctx.strokeStyle = "orange"

// create a path
ctx.beginPath()
ctx.lineWidth = 4
ctx.moveTo( xLeft ,yLeft)//50
ctx.bezierCurveTo( 200 , 75 , 200 , 350 , 200 , 350);
console.log("xleft = ",xLeft);
console.log("yLeft = ",yLeft);
ctx.stroke()
}
Timer {
repeat: true;
running: true;
onTriggered:{toggle();
}
//Component.Ready:collectPoints();
}

There is an example of how to create and use a custom QQuickPaintedItem here.

thanks a lot for the sample code, it is really helpful. i am trying a sample.

[smrati.johri]

hi,

i have tried the suggested example this.
but for me its is giving the error
"error: Unknown module(s) in QT: charts"

i am trying to register the qml object in c++ class, but in qml itself it is giving me error. can anyone help please.

thanks in advance,
Smrati