This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

Canvas use

rotating

Rotates around the specified point
public final void rotate(float degrees, float px, float py) 
Copy the code
It rotates around the origin of the coordinates
public void rotate(float degrees)
Copy the code

translation

 public void translate(float dx, float dy)
Copy the code

Dx dy is in pixels

The zoom

Sx: the scale of the X-axis

Sy: The scale of the Y-axis

public void scale(float sx, float sy)
Copy the code

Px: the scale point of the X-axis

Py: the scaling point of the Y-axis

public final void scale(float sx, float sy, float px, float py)
Copy the code

Save and Restore

Canvas.svae (): Saves the canvas

Canvas.restore (): Releases the canvas

Example code:
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas? .save()// Save the canvas? .translate(measuredWidth/2f,measuredHeight/2f) for (i in 0.. 360 step 60){ canvas? .drawCircle(100f,0f,20f,paint) canvas? .rotate(60f) } canvas? .restore()// Release the canvas? .drawCircle(100f,100f,100f,paint) }Copy the code

In this example code, the action between Save and Restore moves the canvas to the center of the screen, and then draws six circles around the center of the screen. After restore, the canvas state is restored. The reference point for drawing the circle again is changed to the upper left corner, and the circle is drawn at the upper left corner

Code implementation effect:

A circle

Cx: the x coordinate of the center of the circle

Cy: the y coordinate of the center of the circle

Radius: indicates the radius of a circle

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

Line drawing

StartX: Draws the starting point x coordinate

StartY: Draws the starting point y coordinate

StopX: draws the x-coordinate of the end point

StopY: draws the y coordinate of the end point

Draw one line at a time
public void drawLine(float startX, float startY, float stopX, float stopY,
            @NonNull Paint paint) 
Copy the code
Draw multiple lines at once
public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count,
            @NonNull Paint paint)
Copy the code
Code for drawing multiple points
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas? .translate(measuredWidth / 2f, measuredHeight / 2f) val lines = floatArrayOf(-200f, 200f, 200f, 200f, 200f, -200f, -200f, -200f) canvas? .drawLines(lines, paint) }Copy the code

The effect of this code is to draw two lines:

Article 1: (-200,200) — (200,200),

The second line :(200,-200)–(-200,-200)

Drawing effect

Draw the ellipse

Drawing an ellipse requires building a RectF object

RectF oval = new RectF(150, 200, 500, 400); // Draw a canvas. DrawOval (oval, p);Copy the code

Draw the curved

api
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint)
Copy the code
Drawing code
val oval = RectF(200f, 200f, 500f, 500f) override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas? .drawArc(oval, 0f, 120f, false, paint) canvas? .translate(0f,400f) canvas? .drawArc(oval, 0f, 120f, true, paint) }Copy the code
Drawing effect

Draw a rectangular

api
 public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) 
Copy the code
 public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
Copy the code
Drawing code
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas? .apply { drawRect(rect, paint) translate(0f,500f) drawRoundRect(rect,60f,80f,paint) } }Copy the code
Drawing effect

Draw a polygon

Drawing multiple rows through Path is described in the Path section

Let me draw a Bezier curve

Draw bezier curves through Path, as described in the Path section

Draw some

api

Draw a point

public void drawPoint(float x, float y, @NonNull Paint paint)
Copy the code

Draw multiple points

 public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,
            @NonNull Paint paint)
Copy the code

Draw pictures

Drawing picture code
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas? .drawBitmap(bitmap, 300f, 300f, paint) }Copy the code
Drawing effect