Android Canvas Canvas parsing

1. Introduction

In the development, we often need to customize the View to achieve a variety of effects, in this process, we often need to use Canvas Canvas to draw a variety of graphics and patterns, so it is particularly important to master the various use methods of Canvas. This article will briefly introduce the various uses of Canvas to deepen your understanding.

2. Draw various graphics

Canvas provides many drawing methods, based on which we can draw a variety of graphics. We will start to introduce these drawing methods below.

2.1 drawARGB

This method draws a color background with ARGB colors as follows:

//a: the alpha part of the color. The value ranges from 0 to 255
//r: the red part of the color. The value ranges from 0 to 255
//g: the green part of the color. The value ranges from 0 to 255
//b: the blue part of the color. The value ranges from 0 to 255
public void drawARGB(int a, int r, int g, int b)
Copy the code

Now use this method to draw a solid color background as shown in the following example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawARGB(255.150.100.100);
}
Copy the code

2.2 drawArc

Here’s one of the methods:

//left: the distance from left to the left of the parent layout
//top: Distance from the top edge to the top edge of the parent layout
//right: the distance from the right to the left of the parent layout
//bottom: the distance from the bottom to the top of the parent layout
//startAngle: The Angle at which the arc begins
//sweepAngle: clockwise scanning Angle
//useCenter: Whether to use the center
//paint: the brush for drawing arcs. This value cannot be null
public void drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)
Copy the code

This method is used to draw an arc. If the initial Angle is negative or greater than or equal to 360, the initial Angle is taken as the modulus of 360. If the scan Angle is greater than or equal to 360, the ellipse will be drawn completely. If the scan Angle is negative, the scan Angle is mod 360. The arc is drawn clockwise, with 0 degrees corresponding to 3 o ‘clock of the clock. An example with useCenter being true is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawArc(50.50.300.300.0.300.true,paint);
}
Copy the code

An example of this with useCenter being false is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawArc(50.50.300.300.0.300.false,paint);
}
Copy the code

Another way to overload drawArc is as follows:

//oval: The boundary of the oval used to define the shape and size of the arc. This value cannot be null
//startAngle: The Angle at which the arc begins
//sweepAngle: clockwise scanning Angle
//useCenter: Whether to use the center
//paint: the brush for drawing arcs. This value cannot be null
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)
Copy the code

An example of this method with useCenter true is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF(50.50.300.300);
    canvas.drawArc(rectF,0.200.true,paint);
}
Copy the code

An example of this method with useCenter set to false is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF(50.50.300.300);
    canvas.drawArc(rectF,0.200.false,paint);
}
Copy the code

2.3 drawBitmap

This method is used to draw bitmaps. This method has many overloads. Let’s look at one of them:

//bitmap: the bitmap to draw
//matrix: used to transform bitmap matrix
//paint: paint for drawing bitmaps, possibly null
public void drawBitmap(@NonNull Bitmap bitmap, @NonNull Matrix matrix, @Nullable Paint paint)
Copy the code

An example of a bitmap drawn by this method is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test);
    Matrix matrix = new Matrix();
    canvas.drawBitmap(bitmap,matrix,paint);
}
Copy the code

To see how a drawBitmap can be overloaded:

//bitmap: the bitmap to draw
// SRC: a subset of the bitmap to be drawn, i.e. all or part of the bitmap to be drawn, may be null
// DST: the rectangle that the bitmap will be scaled and transformed to fit
//paint: paint for drawing bitmaps, possibly null
public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst,
            @Nullable Paint paint)
Copy the code

This method is used to draw a bitmap that automatically scales and transforms to fit the target rectangle, as shown in the following example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test);
    Rect srcRect = new Rect(0.0.300.300);
    Rect dstRect = new Rect(0.0.600.600);
    canvas.drawBitmap(bitmap,srcRect,dstRect,paint);
}
Copy the code

Here’s another overloaded method:

//bitmap: the bitmap to draw
// SRC: a subset of the bitmap to be drawn, i.e. all or part of the bitmap to be drawn, may be null
// DST: the rectangle that the bitmap will be scaled and transformed to fit
//paint: paint for drawing bitmaps, possibly null
public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst,
            @Nullable Paint paint)
Copy the code

This method is also used to draw a bitmap that automatically scales and transforms to fit the target rectangle, as shown in the following example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test);
    Rect srcRect = new Rect(0.0.300.300);
    RectF dstRectF = new RectF(0.0.600.600);
    canvas.drawBitmap(bitmap,srcRect,dstRectF,paint);
}
Copy the code

Another way to draw bitmaps is as follows:

//bitmap: the bitmap to draw
//left: left position of bitmap
//top: position of the top edge of the bitmap
//paint: paint for drawing bitmaps, possibly null
public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)
Copy the code

This method draws a bitmap with the top left corner at (x,y). If the bitmap and the canvas have different densities, it will automatically scale the bitmap to draw at the same density as the canvas, as shown in the following example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test);
    canvas.drawBitmap(bitmap,50.100,paint);
}
Copy the code

2.4 methods like drawCircle

If the radius is less than or equal to zero, nothing will be drawn. Depending on the style of the brush, the circle will be filled or drawn with an outline as follows:

//cx: the x-coordinate of the center of the circle
//cy: y coordinates of the center of the circle
//radius: the radius of a circle
//paint: paint a circle
public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
Copy the code

An example of this method is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(200.200.150,paint);
}
Copy the code

2.5 drawColor

This method fills the bitmap of the entire canvas with color as follows:

//color: the color to draw on the canvas
public void drawColor(@ColorInt int color)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.GREEN);
}
Copy the code

Here’s another overloaded method:

//color: the color to draw on the canvas
//mode: Porter-duff mode applied to colors
public void drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode)
Copy the code

This method fills the bitmap of the entire canvas with colors and porter-duff mode as shown in the following example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.GREEN, PorterDuff.Mode.DARKEN);
}
Copy the code

2.6 drawLine

This method uses paint and the starting and ending X and y coordinates to draw a line segment. Since lines are always contoured, the paint style is ignored as follows:

//startX: x coordinates of the starting point of the line segment
//startY: y coordinates of the starting point of the line segment
//stopX: x coordinates of the end point of the line segment
//stopY: y coordinates of the end point of the line segment
//paint: brushes to draw line segments
public void drawLine(float startX, float startY, float stopX, float stopY,
            @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawLine(50.50.300.300,paint);
}
Copy the code

2.7 drawLines

This method draws a series of line segments, each requiring four consecutive values from the PTS array. Therefore, to draw a line, the array must contain at least four values. Logically, as with the following arrays, the lines are drawn using PTS [0], PTS [1], PTS [2], PTS [3], then [4], PTS [5], PTS [6], PTS [7], and so on. The method is as follows:

// PTS: Array of points to draw, such as [x0,y0,x1,y1,x2,y2...]
//offset: the number of values to skip in the array before drawing
//count: The number of values in the array to process after the offset is skipped
//paint: paint brushes
public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count,
            @NonNull Paint paint)
Copy the code

An example of this method is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float[] pts = {50.10.100.200.300.200.200.400};
    canvas.drawLines(pts,0.8,paint);
}
Copy the code

Here’s another overloaded method:

// PTS: Array of points to draw, such as [x0,y0,x1,y1,x2,y2...]
//paint: paint brushes
public void drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float[] pts = {50.10.100.200.300.200.200.400};
    canvas.drawLines(pts,paint);
}
Copy the code

2.8 drawOval

This method uses paint to draw an ellipse. The ellipse is filled or outlined according to the paint style.

//left: the distance from left to the left of the parent layout
//top: Distance from the top edge to the top edge of the parent layout
//right: the distance from the right to the left of the parent layout
//bottom: the distance from the bottom to the top of the parent layout
//paint: paint brushes
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawOval(50.50.600.300,paint);
}
Copy the code

Let’s look at another overloaded method:

//oval: the rectangle boundary of the ellipse. This value cannot be null
//paint: paint brush, cannot be null
public void drawOval(@NonNull RectF oval, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF(50.50.600.300);
    canvas.drawOval(rectF,paint);
}
Copy the code

2.9 drawPaint

This method fills the bitmap of the entire canvas with paint as follows:

//paint: paint brushes on a canvas
public void drawPaint(@NonNull Paint paint)
Copy the code

2.10 drawPath

This method uses paint to draw paths. The paths are filled or outlined according to the paint style.

//path: the path to be drawn
//paint: brushes to draw paths
public void drawPath(@NonNull Path path, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Path path = new Path();
    path.moveTo(50.50);
    path.lineTo(200.100);
    path.lineTo(200.400);
    path.lineTo(150.500);
    canvas.drawPath(path,paint);
}
Copy the code

2.11 drawPoint

This method is used to draw a point as follows:

//x: the x coordinate of the point
//y: the y coordinate of the point
//paint: paint the points
public void drawPoint(float x, float y, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawPoint(100.100,paint);
}
Copy the code

2.12 drawPoints

This method draws a series of points, each at the center of the coordinates determined by PTS [], the diameter of the point determined by the stroke width of the brush, the shape of the point determined by the Cap type of the brush, the shape of the point is square, except when Cap type is Round, the shape of the point is Round, as follows:

// PTS: array of points to draw [x0,y0,x1,y1,x2,y2...]
//offset: the number of values skipped before drawing
//count: The number of values to process after the offset is skipped
//paint: paint the points
public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,
            @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float[] pts = {50.50.100.200.300.200.200.400};
    canvas.drawPoints(pts,0.8,paint);
}
Copy the code

Here’s another overloaded method:

// PTS: array of points to draw [x0,y0,x1,y1,x2,y2...]
//paint: paint the points
public void drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float[] pts = {50.50.100.200.300.200.200.400};
    canvas.drawPoints(pts,paint);
}
Copy the code

2.13 drawRGB

This method fills the bitmap of the entire canvas with RGB colors as follows:

//r: the red part of the color. The value ranges from 0 to 255
//g: the green part of the color. The value ranges from 0 to 255
//b: the blue part of the color. The value ranges from 0 to 255
public void drawRGB(int r, int g, int b)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawRGB(200.100.100);
}
Copy the code

2.14 drawRect

This method uses a brush to draw a rectangle. The rectangle is filled or the outline is displayed according to the brush style.

//left: left side of the rectangle
//top: the top edge of the rectangle
//right: right side of the rectangle
//bottom: the bottom of the rectangle
//paint: paint a rectangle
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawRect(50.100.500.300,paint);
}
Copy the code

Look at an overloaded method as follows:

//r: rectangle to draw
//paint: paint a rectangle
public void drawRect(@NonNull Rect r, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Rect rect = new Rect(50.100.500.300);
    canvas.drawRect(rect,paint);
}
Copy the code

Here’s another overloaded method:

//rect: rectangle to draw
//paint: paint a rectangle
public void drawRect(@NonNull RectF rect, @NonNull Paint paint)
Copy the code

An example of this method is as follows:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF(50.100.500.300);
    canvas.drawRect(rectF,paint);
}
Copy the code

2.15 drawRoundRect

This method uses a brush to draw a rounded rectangle. The rectangle is filled or the outline is displayed according to the brush style.

//rect: rectangle boundary of rounded rectangle
//rx: x radius of the rounded corner
//ry: y radius of rounded corners
// Paint: paint a rounded rectangle
public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF(50.100.500.300);
    canvas.drawRoundRect(rectF,20.20,paint);
}
Copy the code

2.16 drawText

This method is used to draw text, the origin is (x,y), and the origin is related to the alignment Settings in paint, as follows:

//text: drawn text
//x: the x coordinate of the origin of the text
//y: the y coordinate of the text baseline
//paint: a brush for drawing text. You can set color, size, style, etc
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    String text = "Android Canvas";
    canvas.drawText(text,200.300,paint);
}
Copy the code

Here’s another overloaded method:

//text: drawn text
//start: index of the first character in the text to be drawn
//end :(end-1) is the index of the last character in the text to be drawn
//x: the x coordinate of the origin of the text
//y: the y coordinate of the text baseline
//paint: a brush for drawing text. You can set color, size, style, etc
public void drawText(@NonNull String text, int start, int end, float x, float y,
            @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    String text = "Android Canvas";
    canvas.drawText(text,3.11.200.300,paint);
}
Copy the code

2.17 drawTextOnPath

This method uses the brush paint to draw text along a path. The alignment of the brushes determines where the text is drawn along the path as follows:

//text: drawn text
//path: the path the text should follow
//hOffset: The offset along the beginning of the path text
HOffset: The offset distance of the text above or below the path, which can be positive or negative
//paint: a brush for drawing text. You can set color, size, style, etc
public void drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
            float vOffset, @NonNull Paint paint)
Copy the code

The following is an example:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    String text = "Android Canvas";
    Path path = new Path();
    path.moveTo(50.50);
    path.lineTo(200.100);
    path.lineTo(400.400);
    canvas.drawTextOnPath(text,path,0.0,paint);
}
Copy the code

3. Summary

When customizing a View, Canvas will often be used, so it is important to master and use these drawing methods skillfully. Canvas can be used to draw points, lines, rectangles, circles, ellipses, texts, paths, bitmaps and other graphic patterns. This paper introduces various methods of Canvas in detail and gives sample codes. By flexibly combining these methods, various patterns and effects can be drawn.