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.
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.