drawing lines on a canvas and move them dynamically

[smrati.johri]

hi all,

i have a structure with me which contains array of points from which i want to draw certain line.
number of lines are also available in the structure.
Based on certain response that structure data will be changed and the lines need to be redrawn. structure data will be changes dynamically.

A very close real time example i can give is grid lines shown on reverse parking of a car, it even lines bend and change shape based on steering movement.
I made a single line, which bends at different angles but its not at all smooth.

the structure mentioned above holds all the points for respective vertical and horizontal lines.
i have read many things regarding beizer curves or cardinal splines.
Found certain code for turning line at various angles but all were in javascript.

my questions are:
1. are there any features in qml with which we can draw line based on array of points.
2. how do i approach to find the solution in building these complete set of lines and dynamically redraw them at various instance.

i am very new to qt. also quite a newbie to UI programming.
it would be great if someone can help me.

regards

[anda_skoa]

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.

Cheers,
_

[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 (http://doc.qt.io/qt-5/qtqml-tutorials-extending-qml-example.html).

[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 (http://doc.qt.io/qt-5/qtqml-tutorials-extending-qml-example.html).
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