Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

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

    0_1545057769893_0f469325-bf15-4db0-9b42-18b1d1038c68-image.png
    0_1545057786473_067401ea-cde6-41da-9b42-cc64ed9230b9-image.png


  • Lifetime Qt Champion

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

    Ok
    And how do you do the zooming ?



  • @mrjj

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


  • Lifetime Qt Champion

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



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

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



  • 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()
    
            }
        }
    }
    

    }



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


Log in to reply