ZOOM canvas

[Samuel Costa]

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

[mrjj]

@Samuel-Costa
How do you currently do it ?
Using Pixmap ?
Is this QML or QWidgets ?

[Samuel Costa]

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

[mrjj]

Ok
And how do you do the zooming ?

[Samuel Costa]

@mrjj

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

[mrjj]

@Samuel-Costa
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.

[Samuel Costa]

@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.

[mrjj]

@Samuel-Costa
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.

[Samuel Costa]

This is my code.
Please help me:

Window{
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: {
            console.log("ONPAINT..........")
            //GRID
            var context = mycanvas.getContext("2d")
            //context.save();
            context.clearRect(0, 0, mycanvas.width, mycanvas.height);
            //context.scale(val, val);

            context.lineWidth = 1
            context.strokeStyle = "black"
            context.beginPath()
            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);
            }
            context.stroke()
            context.closePath();
            context.fill()
            //! [0]
            if (mycanvas.fill)
                context.fill();
            if (mycanvas.stroke)
                context.stroke();
            context.restore();

            context.setTransform(val,0, 0, val, 0, 0);

        }

        function clear() {
            console.log("CLEAR" + JSON.stringify(context))
            mycanvas.requestPaint();
        }

        Rectangle{
            id:rect
            //anchors.centerIn: mycanvas.context
            color: "blue"

            width: 20
            height: 20
        }

    } // Canvas

    Button {
        text: "+"
        anchors.right: parent.right

        onClicked: {
             mycanvas.scale += 1
            mycanvas.clear()

        }
    }
}

}

[Samuel Costa]

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