Curved Line on QML Map
-
Hi
Is it possible to add a curved line/arc between 2 coordinates on a QML Map? If yes, how?
The line indicated in the image should be a curve.Thanks!!
-
I have tried this code in a MapquickItem but it doesn't display anything on the map.
Endcurves.qml
import QtQuick 2.6 import QtQuick.Controls 1.4 import QtLocation 5.6 import QtPositioning 5.5 import "../qml_maps" MapQuickItem{ id: _endcurve anchorPoint.x: x1 anchorPoint.y: y1 property real _width: 24 property real _height: 24 property real x1: 0.0 property real x2: 0.0 property real y1: 0.0 property real y2: 0.0 property real ang: 0 function callPaint(){ _canvas.requestPaint() } sourceItem: Rectangle{ id: _wayPointImage color: "transparent" property color strokeStyle: "yellow" width: _width height: _height Canvas{ id: _canvas anchors.fill: parent antialiasing: true onPaint: { console.log("callPaint") var ctx = getContext("2d"); ctx.beginPath() ctx.strokeStyle = _wayPointImage.strokeStyle; ctx.moveTo(x1,y1) ctx.lineWidth = 3 ctx.bezierCurveTo(x2,y2) ctx.closePath(); ctx.stroke() // ctx.rotate(ang); } } } }
and from my map, I am calling this function
function addbezierCurves(){ console.log("beizer") var endcurvesItem for(var i=1;i<gridCoordinatesList.length;i += 2){ var pt1 = _map.fromCoordinate(gridCoordinatesList[i]) var pt2 = _map.fromCoordinate(gridCoordinatesList[i+1]) var component = Qt.createComponent("Endcurves.qml"); if (component.status === Component.Ready) { endcurvesItem = component.createObject(_map); endcurvesItem._width = Math.abs(pt2.x - pt1.x) endcurvesItem._height = Math.abs(pt2.y - pt1.y) endcurvesItem.x1 = pt1.x endcurvesItem.y1 = pt1.y endcurvesItem.x2 = pt2.x endcurvesItem.y2 = pt2.y endcurvesItem.coordinate = gridCoordinatesList[i] } endcurvesItem.callPaint() _map.addMapItem(endcurvesItem) } } I am kinda new to canvas so, If I have missed out anything, please guide. Thanks.