Re: [Interest] Qml Canvas is too slow

[Jason H]

Very simply, you don't have to repaint the entire thing every time.

You can paint the squares, then fill them in one by one.

You're essentiallt re-drawing over already dorawn pixels.

 

 

Sent: Thursday, October 31, 2019 at 11:42 AM
From: "Alexander Dyagilev" <alervd...@gmail.com>
To: "interest@qt-project.org" <interest@qt-project.org>
Subject: [Interest] Qml Canvas is too slow

Hello,

The following code is too slow (paint operation takes few seconds):

Canvas {

        id: map

        width: columnsCount * rectangleSize

        height: rowsCount * rectangleSize

        anchors.horizontalCenter: alignCenter ? parent.horizontalCenter : undefined

        anchors.left: alignCenter ? undefined : parent.left

        anchors.bottom: parent.bottom

        property int offset: 1

 

        onPaint: drawMap()

 

        function drawMap() {

            if (columnsCount === 0 || rowsCount === 0) {

                return;

            }

 

            var map = downloadProgressMap.map();

            var ctx = getContext("2d");

 

            for (var i = 0; i < map.length; i++) {

                var x = (i % columnsCount) * rectangleSize;

                var y = (Math.floor(i/columnsCount)) * rectangleSize;

 

                if (map[i]) {

                    drawFillRect(ctx, x, y);

                } else {

                    drawClearRect(ctx, x, y);

                }

            }

        }

 

        function drawFillRect(ctx, x, y) {

            ctx.fillStyle = appWindow.theme.progressMapFillBorder

            ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, rectangleSize - offset * 2);

            ctx.fillStyle = appWindow.theme.progressMapFillBackground

            ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - (offset + 1) * 2, rectangleSize - (offset + 1) * 2);

        }

 

        function drawClearRect(ctx, x, y) {

            ctx.fillStyle = appWindow.theme.progressMapClearBorder

            ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, rectangleSize - offset * 2);

            ctx.fillStyle = appWindow.theme.background

            ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - (offset + 1) * 2, rectangleSize - (offset + 1) * 2);

        }

    }

Can anything be done to improve its speed, or should we use c++ instead?

It paints the following:



Map size: 2323 elements.

_______________________________________________ Interest mailing list Interest@qt-project.org https://lists.qt-project.org/listinfo/interest

_______________________________________________
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest