Canvas, the basis of custom View drawing

CanvasCanvas

Canvas is an important class used for drawing graphics. It provides a set of drawing operation methods that allow you to draw various shapes, images, and text on the screen. The following are the main functions of the Canvas class:

Table of contents

1. Draw graphics and images

3. Draw geometric figures

5. Geometric transformation

6. Save and restore canvas

1.save() and restore()

1. Draw graphics and images

1.drawColor

Function: Fill the entire canvas with the specified color

prototype:

public void drawColor(@ColorInt int color)

parameter:

color: color to fill

Example:

drawColor(Color.BLACK);  // 纯黑
drawColor(Color.parse("#88880000"); // 半透明红色

2.drawCircle

Function: Draw a circle on the canvas.

prototype:

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

parameter:

cx: The abscissa coordinate of the center of the circle.
cy: The vertical coordinate of the center of the circle.
radius: The radius of the circle.
paint: Brush used to specify drawing effects

Example:

Paint paint = new Paint();

paint.setColor(Color.RED); 

canvas.drawCircle(300, 300, 100, paint);

3.drawRect

Function: Draw a rectangle on the canvas.

public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)

parameter:

left: The abscissa coordinate of the upper left corner of the rectangle.
top: The ordinate of the upper left corner of the rectangle.
right: The abscissa coordinate of the lower right corner of the rectangle.
bottom: The ordinate of the lower right corner of the rectangle.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.GREEN);
canvas.drawRect(100, 100, 400, 300, paint);

4.drawLine

Function: Draw a straight line on the canvas.

prototype:

public void drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)

parameter:

startX: The abscissa coordinate of the starting point.
startY: The vertical coordinate of the starting point.
stopX: The abscissa coordinate of the end point.
stopY: The ordinate of the end point.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawLine(50, 50, 200, 200, paint);

5.drawText

Function: Draw text on the canvas.

prototype:

public void drawText(String text, float x, float y, @NonNull Paint paint)

parameter:

text: The text to be drawn.
x: The abscissa coordinate of the starting point of the text.
y: The vertical coordinate of the starting point of the text.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(30);
canvas.drawText("Hello, Canvas!", 50, 50, paint);

5.drawBitmap

Function: Draw bitmap on canvas.

prototype:

void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

Parameter explanation:

bitmap: The bitmap to be drawn.
left: The abscissa coordinate of the upper left corner of the bitmap.
top: The ordinate of the upper left corner of the bitmap.
paint: Brush used to specify drawing effects.

Example:

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample_image); 

canvas.drawBitmap(bitmap, 100, 200, null);

2. Draw the path

1.drawPath

Function: Draw the specified path on the canvas.

prototype:

public void drawPath(Path path, @NonNull Paint paint)

parameter:

path: The path to draw.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.RED);
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(300, 100);
path.lineTo(200, 300);
path.close();
canvas.drawPath(path, paint);

3. Draw geometric figures

1.drawArc

Function: Draw an arc on the canvas.

prototype:

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)

Parameter explanation:

oval: A rectangle enclosing an arc.
startAngle: Arc starting angle, with the positive x-axis direction as 0 degrees.
sweepAngle: The angle of the arc sweep.
useCenter: Whether to connect to the center of the circle to form a sector.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.GREEN);
RectF oval = new RectF(100, 100, 300, 300);
canvas.drawArc(oval, 45, 90, true, paint);

2.drawOval`

Function: Draw an ellipse on the canvas.

prototype:

public void drawOval(RectF oval, Paint paint)

parameter:

oval: A rectangle enclosing an ellipse.
paint: Brush used to specify drawing effects.

Example:

Paint paint = new Paint();
paint.setColor(Color.BLUE);
RectF oval = new RectF(100, 100, 300, 200);
canvas.drawOval(oval, paint);

4. Cutting

1.clipRect

Function: Set the cropping area of the canvas to a rectangle.

prototype:

public boolean clipRect(Rect rect)

parameter:

rect: Cropped rectangular area.

Example:

Rect rect = new Rect(50, 50, 200, 200);
canvas.clipRect(rect);

2.clipPath

Function: Set the cropping area of the canvas as a path.

prototype:

public boolean clipPath(Path path)

parameter:

path: The clipping path.

Example:

Path path = new Path();
// 添加路径操作，例如 moveTo、lineTo
canvas.clipPath(path);

5. Geometric transformation

1.translate

Function: Pan the canvas.

prototype:

public void translate(float dx, float dy)

parameter:

dx: Translation distance in the horizontal direction.
dy: The translation distance in the vertical direction.

Example:

canvas.translate(100, 50);  // 将画布在水平方向上平移 100，垂直方向上平移 50

2.scale

Function: Zoom canvas.

prototype:

public void scale(float sx, float sy)

parameter:

sx: The scaling ratio in the horizontal direction.
sy: The scaling ratio in the vertical direction.

Example:

canvas.scale(1.5f, 2.0f);  // 将画布在水平方向上放大 1.5 倍，垂直方向上放大 2 倍

3.rotate

Function: Rotate the canvas.

prototype:

public void rotate(float degrees)

parameter:

degrees: Angle of rotation.

Example:

canvas.rotate(45);  // 将画布顺时针旋转 45 度

4.skew

Function : Bevel-cut (wrong-cut) canvas.

prototype:

void skew(float sx, float sy)

Parameter explanation:

sx: Miscut factor in the horizontal direction.
sy: Offset factor in the vertical direction.

Example:

canvas.skew(0.2f, 0);  // 在水平方向上进行横向错切

5.concat

Function: Use matrices to perform various transformations.

prototype:

void concat(Matrix matrix)

Parameter explanation:

matrix:Transformation matrix.

Example:

Matrix matrix = new Matrix();
matrix.postTranslate(100, 50);  // 平移
matrix.postRotate(45);  // 旋转
canvas.concat(matrix);  // 应用变换矩阵

6. Save and restore canvas

1.save() and restore()

Function: Save and restore the state of the canvas, including translation, scaling, rotation and other transformations.

prototype:

int save()
void restore()

No parameters.

Example:

int saveCount = canvas.save();  // 保存当前画布状态
// 在这里进行绘制和变换操作
canvas.restoreToCount(saveCount);  // 恢复到保存的画布状态