QML canvas crash

[econsysqtdev]

Hello all,

My requirement is to draw lines inside a circle on a QML canvas. The lines are drawn using lineTo function. Lines are drawn from 0.1 degree to 360 degrees. There can also be a scenario in which one position can have more than one line ( like a dash line). While drawing the lines we observed that the canvas consumes a big percentage of CPU & memory and eventually the application crashes.

This issue does not happen if we are drawing the lines for every 1 degree.

Has anyone faced similar issue ?

Attaching code for your reference:

@
import QtQuick 2.3
import QtQuick.Controls 1.2
import XMLReader 1.0

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

property var appliedVRIData:[]
property double highDepth : 0.0

XMLReader
{
    id : xmlReader

    onAppliedVRIDataChanged :
    {
       appliedVRIData = zoneDetails
    }

    Component.onCompleted: {
        console.log("XML Reader Created")
    }
}

Canvas {

    id: displayMap
    anchors.centerIn: parent
    width: 340
    height: 280
    antialiasing: true
    visible: true

    MouseArea {
        anchors.fill: parent
        onClicked: {
            xmlReader.ParseXML("/home/econsys/Applied~20161~02~360080zones.xml")
            displayMap.requestPaint()
        }
    }

    onPaint: {
        // Get drawing context
        var context = getContext("2d");
        context.clearRect(0, 0, 340, 280);

        var x = displayMap.width / 2;
        var y = displayMap.height / 2;
        var pieRadius = Math.min.apply(Math, [(height/2),width/2]) //Min([height/2,width/2]) - 5;

        context.save()

        // Make canvas all white
        context.beginPath();
        context.clearRect(0, 0, width, height);
        context.fill();

        var pieRadius1 = Math.min.apply(Math, [(displayMap.width/2),displayMap.height/2])

        // Draw a circle
        context.beginPath();

        context.fillStyle = "#000000"
        context.arc(x, y, pieRadius, 0, 2*Math.PI, false) //x, y, radius, startAngle, endAngle, anticlockwise
        context.fill();

        context.beginPath();
        context.lineWidth = 2;

        var changes=0;
        var prevchanges = changes;
        var noOfZones=1;

        highDepth = parseFloat(getMaxDepth())

        var changeInDepth = parseFloat(appliedVRIData[5]);
        for(var i = 0, j = 1, k = 2,l = 3,m=4,n=5,o=6; i<appliedVRIData.length; i+=7, j+=7, k+=7, l+=7,m+=7, n+=7, o+=7)
        {
            var pixelsPerMeter = pieRadius1/parseFloat(appliedVRIData[n]);//ratio
            var currentPixelPos = changeInDepth * pixelsPerMeter ;

            if(appliedVRIData[i] > noOfZones)
            {
                noOfZones = parseInt(appliedVRIData[i]);
            }

            var x1 = displayMap.width/2;
            var y1 = displayMap.height/2;

            context.beginPath();
            context.lineWidth = 0.5;

            var depth = parseFloat(appliedVRIData[k]).toFixed(2);

            context.strokeStyle =  getColor((depth/highDepth)*100)
            context.fillStyle =  getColor((depth/highDepth)*100)
            context.moveTo(x1, y1);

            changes = parseFloat(appliedVRIData[n]).toFixed(1)

            var pos = parseFloat(appliedVRIData[j]).toFixed(1)
            //                        var startAngle =   (pos - 90.1)  * (Math.PI/180 );
            //                        var endangle   =   (pos - 89.9) * (Math.PI/180 );
            //console.log(x1, y1, currentPixelPos, startAngle,  endangle,false)
            //context.arc(x1, y1, currentPixelPos, startAngle,  endangle,false);

// if((pos.charAt(pos.length-1)==='0'))
context.lineTo(x1 + (currentPixelPos * Math.cos((((pos - 90 ) ) * Math.PI/180))), y1 + (currentPixelPos * Math.sin((((pos - 90 ) ) * Math.PI/180))));

            prevchanges += parseFloat(appliedVRIData[m]);

            if(changes < prevchanges)
            {
                changeInDepth = parseFloat(appliedVRIData[n]);
                prevchanges = 0;
            }
            else
            {
                changeInDepth = changes-prevchanges;
            }

            //changeInDepth = changes-prevchanges;

            //console.log("Current Pixel Pos::CurrentZone::Depth::Width::TotalZoneLength::NoOfZones", pos, appliedVRIData[i], [k], appliedVRIData[m],appliedVRIData[n], appliedVRIData[o],currentPixelPos, changeInDepth, changes, prevchanges)

            context.stroke();
            context.fill();
        }
    }
}

function getColor(number)
{
    number  = parseInt(number)

    var colorArray =[100]
    colorArray[0] ="#000000"
    colorArray[1] ="#000000"
    colorArray[2] ="#000000"
    colorArray[3] ="#000000"
    colorArray[4] ="#000000"
    colorArray[5] ="#a00000"
    colorArray[6] ="#b40000"
    colorArray[7] ="#c00000"
    colorArray[8] ="#c60600"
    colorArray[9] = "#c80d00"
    colorArray[10] ="#ca1400"
    colorArray[11] ="#cc1b00"
    colorArray[12] ="#ce2200"
    colorArray[13] ="#d02900"
    colorArray[14] ="#d23000"
    colorArray[15] ="#d43600"
    colorArray[16] ="#d63d00"
    colorArray[17] ="#d84400"
    colorArray[18] ="#da4b00"
    colorArray[19] ="#dd5200"
    colorArray[20] ="#df5900"
    colorArray[21] = "#e16000"
    colorArray[22] ="#e36700"
    colorArray[23] ="#e56e00"
    colorArray[24] ="#ec7500"
    colorArray[25] ="#ee7c00"
    colorArray[26] ="#f08200"
    colorArray[27] ="#f28900"
    colorArray[28] ="#f59000"
    colorArray[29] ="#f79700"
    colorArray[30] ="#f99e00"
    colorArray[31] ="#fba500"
    colorArray[32] ="#fdac00"
    colorArray[33] ="#ffb300"
    colorArray[34] ="#f4ba00"
    colorArray[35] ="#ecc100"
    colorArray[36] ="#e4c700"
    colorArray[37] ="#dbe803"
    colorArray[38] ="#d3e506"
    colorArray[39] ="#cbe10a"
    colorArray[40] ="#c3de0d"
    colorArray[41] ="#bbda11"
    colorArray[42] ="#b3d714"
    colorArray[43] ="#abd318"
    colorArray[44] ="#a3d01b"
    colorArray[45] ="#0fcc1f"
    colorArray[46] ="#0ec922"
    colorArray[47] ="#0e9b2c"
    colorArray[48] ="#0d9d33"
    colorArray[49] ="#0c9e39"
    colorArray[50] ="#0b9f3f"
    colorArray[51] ="#0ba045"
    colorArray[52] ="#0aa24b"
    colorArray[53] ="#09a351"
    colorArray[54] ="#08a457"
    colorArray[55] ="#08a55d"
    colorArray[56] ="#07a763"
    colorArray[57] ="#06a869"
    colorArray[58] ="#05a96f"
    colorArray[59] ="#05aa75"
    colorArray[60] ="#04ac7b"
    colorArray[61] ="#03ad81"
    colorArray[62] ="#02ae87"
    colorArray[63] ="#02af8d"
    colorArray[64] ="#01b193"
    colorArray[65] ="#01b195"
    colorArray[66] ="#00b29b"
    colorArray[67] ="#01b4a1"
    colorArray[68] ="#01b5a7"
    colorArray[69] ="#01b6ad"
    colorArray[70] ="#01b1ed"
    colorArray[71] ="#02a8e5"
    colorArray[72] ="#029fdd"
    colorArray[73] ="#0297d5"
    colorArray[74] ="#028ecd"
    colorArray[75] ="#0285c5"
    colorArray[76] ="#037cbd"
    colorArray[77] ="#0374b4"
    colorArray[78] ="#036bac"
    colorArray[79] ="#0362a4"
    colorArray[80] ="#045a9c"
    colorArray[81] ="#045194"
    colorArray[82] ="#044e91"
    colorArray[83] ="#044b8f"
    colorArray[84] ="#04488c"
    colorArray[85] ="#044589"
    colorArray[86] ="#044287"
    colorArray[87] ="#043f84"
    colorArray[88] ="#043c81"
    colorArray[89] ="#053a7e"
    colorArray[90] ="#05377c"
    colorArray[91] ="#053479"
    colorArray[92] ="#053176"
    colorArray[93] ="#052e74"
    colorArray[94] ="#052b71"
    colorArray[95] ="#05286e"
    colorArray[96] ="#052269"
    colorArray[97] ="#051a61"
    colorArray[98] ="#001159"
    colorArray[99] ="#000851"
    colorArray[100] ="#000049"

    if(number >=0 && number <= 100)
    {
        return colorArray[number];
    }
}

function getMaxDepth()
{
    var highestDepth = 0;
    for(var i = 0, j = 1, k = 2,l = 3,m=4,n=5,o=6; i<appliedVRIData.length; i+=7, j+=7, k+=7, l+=7,m+=7, n+=7, o+=7)
    {
        var depth = parseFloat(appliedVRIData[k]).toFixed(2);
        if(depth > highestDepth)
        {
            highestDepth = depth;
        }
    }
    return highestDepth;
}

}

@

Any help is highly appreciated.

--Narayanan K