Solved 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
-
@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. -
Ok
And how do you do the zooming ? -
increasing the scale, for example: canvas.scale += 1;
-
@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. -
@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