Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1. Drawing functions provided by Canvas

canvas.drawColor();
canvas.drawRGB();
canvas.drawRect();
canvas.drawRoundRect();
canvas.drawCircle();
canvas.drawPath();
canvas.drawLine();
canvas.drawArc();
canvas.drawOval();
canvas.drawPoint();
canvas.drawPoints();
canvas.drawText();
canvas.drawTextOnPath();
canvas.drawBitmap();
Copy the code

2. Paint the background

Used to initialize and empty the canvas

Public void drawColor(@colorint int color) {super.drawColor(color); } // Color draw, Void drawColor(@colorint int color, @nonnull porterduff.mode mode) {super.drawColor(color, mode); } public void drawARGB(int a, int r, int g, int b) {super.drawARGB(a, r, g, b); } public void drawRGB(int r, int g, int b) {super.drawrGB (r, g, b); }Copy the code

The second function uses porterduff. Mode. Porterduff. Mode is mainly used for image blending Mode, which will be discussed later

3. Draw rectangle drawRect

RectF public void drawRect(@nonnull RectF rect, @nonnull Paint Paint) {super.drawRect(rect, Paint); } public void drawRect(@nonnull Rect r, @nonnull Paint Paint) {super.drawRect(r, Paint); Public void drawRect(float left, float top, float right, float bottom, float left, float top, float right, float bottom, @NonNull Paint paint) { super.drawRect(left, top, right, bottom, paint); }Copy the code

Rect and RectF both provide a rectangular local area. (1) Rect uses an int as a value, while RectF uses a float as a value. (2) The methods provided by the two types are not exactly the same.

Rect rect = new Rect(100,100,300,300);
RectF rectf = new RectF(100,400,300,600);

canvas.drawRect(rect, mPaint);
canvas.drawRect(rectf, mPaint);
canvas.drawRect(100, 700, 300, 900, mPaint);
Copy the code

4. Draw rounded rectangle drawRoundRect

public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) { super.drawRoundRect(rect, rx, ry, paint); } public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, @NonNull Paint paint) { super.drawRoundRect(left, top, right, bottom, rx, ry, paint); }Copy the code

Rect: RectF object, a rectangular region. Rx: radius of a fillet in the x direction. Ry: Radius of fillet in y direction. Paint: The brush used for drawing.

Rect rect = new Rect(100,100,300,300);
RectF rectf = new RectF(100,400,300,600);

canvas.drawRect(rect, mPaint);
canvas.drawRoundRect(rectf, 5, 20, mPaint);
canvas.drawRoundRect(100, 700, 300, 900, 20, 5, mPaint);
Copy the code

5. Draw the drawCircle

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
    super.drawCircle(cx, cy, radius, paint);
}
Copy the code

Parameter description: Cx: center x cy: center y Radius: radius

canvas.drawCircle(500, 300, 100, mPaint);
Copy the code

6. Draw a path drawPath

public void drawPath(@NonNull Path path, @NonNull Paint paint) {
    super.drawPath(path, paint);
}
Copy the code

You need a Path

Path path = new Path();
path.moveTo(100, 100);
path.lineTo(100, 200);
path.lineTo(200, 300);
mPaint2.setStrokeJoin(Paint.Join.MITER);
canvas.drawPath(path, mPaint2);
Copy the code

7. Draw the drawLine

// Provide a starting point, Public void drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) { super.drawLine(startX, startY, stopX, stopY, paint); } public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count, @NonNull Paint paint) { super.drawLines(pts, offset, count, paint); } public void drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint) { super.drawLines(pts, paint); }Copy the code

Draw a collection of lines. PTS is a collection of points, with two values representing one point and four values representing one line, not connected to each other. Offset indicates the number of points skipped, and count indicates the number of points to be drawn after the skipped.

canvas.drawLine(500, 500, 500, 300, mPaint);

float[] pos = {20, 30, 40 , 100, 120, 160, 200, 290};
canvas.drawLines(pos, mPaint);
Copy the code

8. DrawArc drawArc

public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
        @NonNull Paint paint) {
    super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
}

public void drawArc(float left, float top, float right, float bottom, float startAngle,
        float sweepAngle, boolean useCenter, @NonNull Paint paint) {
    super.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter, paint);
}
Copy the code

Float startAngle: the Angle at the beginning of the arc, 0 degrees in the positive X direction, clockwise float sweepAngle: Angle of arc duration Boolean useCenter: Has two sides of the arc, True, or two sides, False, only one arc

RectF rectF = new RectF(100, 100, 400, 400);
canvas.drawArc(rectF, 0, 270, false, mPaint2);

rectF = new RectF(500, 500, 800, 800);
canvas.drawArc(rectF, 0, 270, true, mPaint2);
Copy the code

9. Draw elliptical drawOval

public void drawOval(@NonNull RectF oval, @NonNull Paint paint) {
    super.drawOval(oval, paint);
}
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint) {
    super.drawOval(left, top, right, bottom, paint);
}
Copy the code

Draw an ellipse inside the rectangle, or a circle if it’s a square.

RectF rectF = new RectF(100, 100, 400, 400);
canvas.drawOval(rectF, mPaint2);

rectF = new RectF(500, 500, 900, 800);
canvas.drawOval(rectF, mPaint2);
Copy the code

10. Draw the drawPoint

public void drawPoint(float x, float y, @NonNull Paint paint) { super.drawPoint(x, y, paint); } public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count, @NonNull Paint paint) { super.drawPoints(pts, offset, count, paint); } public void drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint) { super.drawPoints(pts, paint);  }Copy the code

You only need to provide two points and a coordinate to draw points.

canvas.drawPoint(100, 100, mPaint2);
        
float[] points = {30, 40, 50, 60, 70, 80};
canvas.drawPoints(points, mPaint2);
Copy the code

11. DrawText Draw the drawTextOnPath text along the path

public void drawText(@NonNull char[] text, int index, int count, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, index, count, x, y, paint);
}

public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
    super.drawText(text, x, y, paint);
}

public void drawText(@NonNull String text, int start, int end, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, start, end, x, y, paint);
}

public void drawText(@NonNull CharSequence text, int start, int end, float x, float y,
        @NonNull Paint paint) {
    super.drawText(text, start, end, x, y, paint);
}
Copy the code

Canvas. DrawText (“MatumbaMan’s blog “,100,100,mTextPaint);

Path path = new Path(); path.addArc(new RectF(100, 100, 600, 600), 0, 260); Canvas. DrawTextOnPath ("MatumbaMan blog ", Path, 10, 20, mTextPaint); Canvas. DrawText ("MatumbaMan's blog ",100,100, mTextPaint);Copy the code

HOffset Horizontal offset of the text relative to the Path, which is used to adjust the position of the text. VOffset Vertical offset of the text relative to the Path, which is used to adjust the position of the text

DrawBitmap drawBitmap

public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst,
        @Nullable Paint paint) {
    super.drawBitmap(bitmap, src, dst, paint);
}

public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst,
        @Nullable Paint paint) {
    super.drawBitmap(bitmap, src, dst, paint);
}
Copy the code

Rect DST or RectF DST: Specify the drawing (display) area of the picture on the screen. First specify the image area, and then specify the area to draw the picture.

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rocket2);
canvas.drawBitmap(bitmap, 100, 100, mPaint);

Rect src = new Rect(0, 0, 100,100);
Rect dst = new Rect(200, 500, 300, 600);
canvas.drawBitmap(bitmap, src, dst, mPaint);
Copy the code