[Interest] Qml Canvas is too slow

[Jérôme Godbout]

Maybe not as fast or future proof, but Maybe a simple Item Rectangle of each type (full and empty) and use a repeater of Qml ShaderEffect {} to duplicate the rendering, may lead to decent performance. Not sure if this will be good enough.


[36E56279]
une compagnie  [cid:image002.jpg at 01D58FF6.802FCA00]
RAPPROCHEZ LA DISTANCE
Jérôme Godbout
Développeur Logiciel Sénior /
Senior Software Developer
p: +1 (418) 800-1073 ext.:109
amotus.ca<http://www.amotus-solutions.com/>
statum-iot.com<http://statum-iot.com/>
[cid:image003.png at 01D58FF6.802FCA00]<https://www.facebook.com/LesSolutionsAmotus/> [cid:image004.png at 01D58FF6.802FCA00] <https://www.linkedin.com/company/amotus-solutions/>  [cid:image005.png at 01D58FF6.802FCA00] <https://twitter.com/AmotusSolutions>  [cid:image006.jpg at 01D58FF6.802FCA00] <https://www.youtube.com/channel/UCoYpQgsmj1iJZyDjTQ3x8Ig>


From: Interest <interest-bounces at qt-project.org> On Behalf Of Alexander Dyagilev
Sent: October 31, 2019 2:13 PM
To: Nuno Santos <nunosantos at imaginando.pt>
Cc: interest at qt-project.org
Subject: Re: [Interest] Qml Canvas is too slow


Thanks for the answer.

This means I'll have to use c++. But I was asking for a way to stick with a pure QML.


On 10/31/2019 7:52 PM, Nuno Santos wrote:
Alexander,

You should use QtQuick Scene Graph. It will be 100x faster.

Look for examples on QtCreator under the welcome tab. Use the search input box and write “scene graph”.

Scene Graph - Custom Geometry
Scene Graph - Graph

If it is the first time, it might look confusing but it will pay off.

Best,

Nuno


On 31 Oct 2019, at 16:42, Alexander Dyagilev <alervdvcw at gmail.com<mailto:alervdvcw at gmail.com>> wrote:

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:



<laaeocmjenhcnjkg.png>



Map size: 2323 elements.
_______________________________________________
Interest mailing list
Interest at qt-project.org<mailto:Interest at qt-project.org>
https://lists.qt-project.org/listinfo/interest

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.jpg
Type: image/jpeg
Size: 6751 bytes
Desc: image001.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image002.jpg
Type: image/jpeg
Size: 1016 bytes
Desc: image002.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment-0001.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image003.png
Type: image/png
Size: 483 bytes
Desc: image003.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image004.png
Type: image/png
Size: 506 bytes
Desc: image004.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image005.png
Type: image/png
Size: 500 bytes
Desc: image005.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image006.jpg
Type: image/jpeg
Size: 713 bytes
Desc: image006.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20191031/ce791cf0/attachment-0002.jpg>