Important: Please read the Qt Code of Conduct -

Canvas Polyline in QML

  • Hi

    How to draw a polyline in QML canvas by dynamically adding points to the line path?


  • Hi! You need to make multiple calls to lineTo():

    for (var i=0; i<pts.length-1; ++i) {
      ctx.moveTo(pts[i].x, pts[i].y)
      ctx.lineTo(pts[i+1].x, pts[i+1].y)

  • @Wieland

    Can canvas be added as a Mapquickitem?

    I am able to add the the canvas successfully on the map but it does not have the mapquickitem properties like onzoom and pan change etc. I am repainting the canvas onzoomlevelchanged , gesture.onPanStarted and gesture.onPanFinished. But the repaint is not so swift and so the lines can be seen not moving with the map. Is there a way to avoid this?

    Note: I am trying to use canvas instead of mappolyline due to bad rendering of the latter and also to add curves to end lines.

    Here is the video demonstrating my problem.


  • @saitej said in Canvas Polyline in QML:

    Can canvas be added as a Mapquickitem?

    The manual says:

    The MapQuickItem type displays an arbitrary Qt Quick object on a Map.

    Regarding the performance related things: I don't know.

  • @Wieland

    Thanks!! I will give it a shot.

Log in to reply