Please nominate your Qt Champions for 2021!

ZOOM canvas

  • I'm trying to zoom (scale) my "canvas" element, but my "grid" stay with bad pixels. I've already tried to redraw my "grid", but it did not work.
    Somebody have some idea?
    Please help me


  • Lifetime Qt Champion

    How do you currently do it ?
    Using Pixmap ?
    Is this QML or QWidgets ?

  • @mrjj
    I am using QML and "Context2D" to make the grid.

  • Lifetime Qt Champion

    And how do you do the zooming ?

  • @mrjj

    increasing the scale, for example: canvas.scale += 1;

  • Lifetime Qt Champion

    It kinda looks like it just makes the pixels bigger.

    Also what api are u using to draw the rects ?
    Seems the blue one scales nice but the other looks like images being blown up.

  • @mrjj
    The problem is that only the grid (I use "Context2D" to make the grid) stays with the bad pixels the other elements for example images that I put on the grid are with the perfect pixels.

  • Lifetime Qt Champion

    Hmm im not really sure what could be wrong.
    However other here are far better at the QML than i am
    could you post the code that draws the grid?
    Hopefully others can spot the culprit then.

  • This is my code.
    Please help me:

    id: root
    width: 1000
    height: 1000
    visible: true
    Rectangle {
    anchors.fill: parent
    color: "grey"

        Canvas {
            id: mycanvas
            anchors.centerIn: parent
            width:  60
            height: 60
            property int wgrid: 20
            property double val: 1
            property var arrpoints : []
            onPaint: {
                var context = mycanvas.getContext("2d")
                context.clearRect(0, 0, mycanvas.width, mycanvas.height);
                //context.scale(val, val);
                context.lineWidth = 1
                context.strokeStyle = "black"
                var nrows = 60/wgrid;
                console.log("NROWS: " + nrows)
                for(var i=0; i < nrows+1; i++){
                    context.moveTo(0, wgrid*i);
                    context.lineTo(60, wgrid*i);
                var ncols = 60/wgrid
                for(var j=0; j < ncols+1; j++){
                    context.moveTo(wgrid*j, 0);
                    context.lineTo(wgrid*j, 60);
                //! [0]
                if (mycanvas.fill)
                if (mycanvas.stroke)
                context.setTransform(val,0, 0, val, 0, 0);
            function clear() {
                console.log("CLEAR" + JSON.stringify(context))
                //anchors.centerIn: mycanvas.context
                color: "blue"
                width: 20
                height: 20
        } // Canvas
        Button {
            text: "+"
            anchors.right: parent.right
            onClicked: {
                 mycanvas.scale += 1


  • I've used two properties:
    smooth: false;
    antialiasing: false
    And the problem is solved

Log in to reply