Canvas provides the following very useful methods for drawing:
- Canvas.save()
- Canvas.restore()
- Canvas.translate()
- Canvas.rotate()
Canvas.save() , literally means to save the canvas, similar to the layer of photoshop , the operation after saving is similar to painting on a new layer.
Canvas.restore() , similar to the operation of layer merging, the function is to merge the image drawn after save () with the image before save() .
Canvas.translate() , Canvas draws based on coordinates. The function of this method is to translate the origin of the coordinates. Let's take a look at the original coordinates first:
If we regard the yellow area as the View canvas, the coordinate axis is as shown in the figure, the direction pointed by the xy arrow is the positive direction of the coordinate axis, and the two parameters passed in by translate(float x,float y) are the new coordinate origin. coordinate value.
Canvas.rotate() , similar to translate() , this method is to rotate the canvas, which needs to pass in the rotation angle and the origin coordinates xy three parameters. The effect of Canvas.rotate(45,0,0) is as follows:
use:
Create a new class ClockView to inherit View , override the onDraw() method, and then reference it in the layout file.
Case number one:
public class ClockView extends View {
public ClockView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float w = getWidth();
float h = getHeight();
/* draw the outer disk */
Paint paintCircle=new Paint();
paintCircle.setStyle(Paint.Style.STROKE);
paintCircle.setAntiAlias(true);
paintCircle.setStrokeWidth(5);
canvas.drawCircle(w /2, h /2, w /2,paintCircle);
/* Draw the scale in the dial */
Paint paintDegree=new Paint();
paintDegree.setStrokeWidth(3);
for (int i=0;i<12;i++){
if (i==0||i==3||i==6||i==9){
paintDegree.setStrokeWidth(8);
paintDegree.setTextSize(40);
canvas.drawLine(w/2,h/2-w/2,w/2,h/2-w/2+90,paintDegree);
String degree=String.valueOf(i);
canvas.drawText(degree,w/2-paintDegree.measureText(degree)/2,h/2-w/2+110,paintDegree);
}else{
paintDegree.setStrokeWidth(3);
paintDegree.setTextSize(25);
canvas.drawLine(w/2,h/2-w/2,w/2,h/2-w/2+60,paintDegree);
String degree=String.valueOf(i);
canvas.drawText(degree,w/2-paintDegree.measureText(degree)/2,h/2-w/2+80,paintDegree);
}
canvas.rotate(30,w/2,h/2); //Rotate the canvas and rotate the canvas once every time you draw a line, 30° each time
}
canvas.save();
/* draw the hour and minute hands */
Paint paintHour=new Paint();
paintHour.setStrokeWidth(20);
Paint paintMin=new Paint();
paintMin.setStrokeWidth(10);
canvas.translate(w/2,h/2); //The origin moves to the center of the circle
canvas.drawLine(0,0,100,100,paintHour);
canvas.drawLine(0,0,0,-200,paintMin);
canvas.restore();
}
}
layout file:
<com.example.y.study.MyView
android:layout_centerInParent="true"
android:layout_width="350dp"
android:layout_height="360dp" />
The effect is as shown in the figure:
Case 2:
public class PeopleView extends View {
public PeopleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float w=getWidth();
float h=getHeight();
Paint paint=new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
canvas.drawCircle(w/2,h/4,h/8,paint);
canvas.save();
canvas.translate(w/2,3*h/8);
canvas.drawLine(0,0,0,h/4,paint);
canvas.drawLine(-w/4,h/16,w/4,h/16,paint);
canvas.restore(); //This method needs to be called after save() because it merges the drawing after save() with before save()
// If there is no save() operation, the translate() and rotate() methods will move or rotate based on the last move
canvas.translate(w/2,5*h/8);
canvas.drawLine(0,0,-h/8,h/4,paint);
canvas.drawLine(0,0,h/8,h/4,paint);
}
}
layout file:
<com.example.y.study.PeopleView
android:layout_centerInParent="true"
android:layout_width="350dp"
android:layout_height="350dp" />
The effect is as shown in the figure:
