Android's Canvas is the canvas, and the coordinates of the canvas are always used when drawing with various draw methods.
By default, the coordinates of the screen and the canvas are the same, both are horizontal x, vertical y, and the upper left corner is the starting point coordinate (0,0).
The following code will draw a circle with a radius of 20 at the top center of the screen.
canvas.drawCircle(width/2, 20, 20, paint);
But the canvas class also provides some methods for manipulating the canvas: rotate (rotate), translate (translation), scale (zoom), after calling these methods, the coordinates of the canvas are inconsistent with the screen coordinates:
canvas.rotate(90,width/2,height/2); canvas.drawCircle(width/2, 20, 20, paint);
At this time, because the coordinate system of the canvas is rotated by 90 degrees, but the screen coordinates are unchanged, the drawn circle is centered on the right side of the screen.
The following describes the save and restore methods
The save and restore methods must be used in pairs, and there must be a save method before the restore method, otherwise an Underflow in restore error will be reported. But there can also be only the save method, but I think only the save method is actually meaningless.
The save method is used to temporarily save the state of the canvas coordinate system
The restore method can be used to restore the state set after save,
It can be simply understood that after calling restore, all the rotate/translate/scale methods called before the restore method are restored, and the coordinate system of the canvas is restored to that before the save method, but it should be noted here that the call of the restore method only affects the drawing after restore. The content of the restore will not have any effect on the graphics that have been drawn to the screen before restore.
The following is a simple example to illustrate
Draw a circle centered at the top of the screen and a circle at the top right
Paint paint = new Paint(); paint.setStrokeWidth(20); paint.setColor(Color.BLUE); // draw a circle at the top center canvas.drawCircle(px/2, 20, 20, paint); // draw a circle in the upper right corner paint.setColor(Color.RED); canvas.drawCircle(px-20, 20, 20, paint);
If you add save and restore methods in the middle
Paint paint = new Paint(); paint.setStrokeWidth(20); paint.setColor(Color.BLUE); canvas.save();//Save the canvas state, and subsequent drawings are in the new canvas coordinates canvas.rotate(90, px/2, py/2);//The canvas is rotated 90 degrees from the center point // draw a circle at the top center canvas.drawCircle(px/2, 20, 20, paint); canvas.restore();//Restore canvas state // draw a circle in the upper right corner paint.setColor(Color.RED); canvas.drawCircle(px-20, 20, 20, paint);
It can be found that the red circle is still in the upper right corner, but the blue circle has gone to the right. The next step is to explain it step by step.
Calling the save method will save the state of the current canvas
Then the rotate(90, px/2, py/2) method will rotate the canvas by 90 degrees,
At this time, the drawCircle(px/2, 20, 20, paint) method draws a blue circle centered at the top, but since the canvas is rotated 90 degrees, the circle is drawn centered on the right
Next, the restore method is called to restore the canvas, which is equivalent to calling rotate(-90, px/2, py/2), but the blue circle has been drawn on the screen just now, and will not be affected by the canvas at this time. So the circle is still centered on the right side of the screen after the canvas is rotated.
Finally call drawCircle(px-20, 20, 20, paint); draw a red circle in the upper right corner of the canvas, because the canvas has been restored to the state before save, and finally you can see that the red circle is in the upper right corner, And the blue circle is centered on the right.
It should be noted that restore can only be restored after save. If other methods of operating the canvas have been called before save, it cannot be restored through restore.