Summary of Canvas usage

Canvas is a class that hosts drawing operations. If you want to draw something, you need four components: A Bitmap that holds pixels, a Canvas that hosts drawing operations (writing to the Bitmap), a basic element for drawing (such as Rect,Path,Text,Btimap), and a brush that describes the color and style of the drawing.

Limited English…

From the description of Canvas class, Canvas is used for painting. Let’s take a look at the painting operations on Canvas (the default Paint is Stroken style) :

Drawing function of Canvas

DrawArc: Draws arcs
/** * @param the full rectangle of the arc * @param start Angle * @Param how many angles to scan * @Param does @Param contain the center point * @Param paint brush */ canvas? .drawArc(RectF(0f, 0f, 500f, 300f), 30f, 90f, false, mPaint)Copy the code

DrawARGB: draws colors
/** * @param alpha 0-255 * @param red 0-255 * @param green 0-255 * @param blue 0-255 */ canvas? .drawARGB(255, 255, 123, 87)Copy the code

DrawBitmap: Draws a bitmap
/** * @param to draw the bitmap * @param to draw left * @Param to draw right * @Param to draw paint */ canvas? .drawBitmap(bitmap, 100f, 100f, mPaint)Copy the code

/** * @param draws the source rectangle (determine the subset of the image to draw, draw the partial information of the image, draw the whole bitmap if null) * @param draws the target rectangle (by scaling and stretching, Draw information to target area) * paint drawn by @param */ canvas? .drawBitmap(bitmap, Rect(0, 0, bitmap.width / 2, bitmap.height / 2), Rect(50, 50, 500, 500), mPaint)Copy the code

DrawBtimap also has an advanced use, drawBitmap(Bitmap Bitmap, Matrix Matrix, Paint Paint), when we talk about Matrix

DrawCircle: Draws a circle
/** * @param draws the center of the circle x * @Param draws the center of the circle Y * @Param draws the radius of the circle * @Param draws the paint */ canvas? .drawCircle(100f, 100f, 50f, mPaint)Copy the code

DrawColor: Draw the color
/** * @param draws the center of the circle x * @Param draws the center of the circle Y * @Param draws the radius of the circle * @Param draws the paint */ canvas? .drawColor(Color.GRAY)Copy the code

This is very simple, similar to drawARGB, but it also has an overload method that requires passing in a porterduff. Mode. Let’s use the following image to see the effect of different modes of porterduff. Mode

DrawLine: Draw a line
/** * @param start point x * @Param start point Y * @param end point X * @Param end point Y * @param end point paint */ canvas? .drawLine(0f, 0f, 100f, 300f, mPaint)Copy the code

/** * @param draws an array that must be a multiple of 4, like the drawLine point. .drawLines(floatArrayOf(0f, 0f, 100f, 300f, 50f, 50f, 200f, 300f), mPaint)Copy the code
DrawOval: Draws an ellipse
/** * @param paints ellipse rectangle * @param paints paint */ canvas? .drawOval(RectF(0f, 0f, 300f, 100f), mPaint)Copy the code

DrawRect: Draws a rectangle

Drawing rectangle parameters is as simple as drawing an ellipse

DrawPoint: Draws a point

To draw a point, you just have to figure out the xy coordinates of the point

DrawText: Draws the text
/** * @param painted text * @param starting point x * @param text base line y * @Param painted paint */ canvas? .drawText("kevinxie", 10f, 200f, mPaint)Copy the code

DrawPath: Draws a path
Val path = path () path.lineto (0f, 100f) path.lineto (100f, 100f) /** * @param paint */ canvas? .drawPath(path, mPaint)Copy the code

There are only so many painting operations of Canvas. Canvas also has the function of deformation

Canvas deformation function

Translate: translation
canvas? . DrawBitmap (bitmap, null, Rect(50, 50, 500, 500), mPaint) /** * @param x * @param Y */ canvas? .translate(100f, 100f) canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

Scale: zoom
canvas? . DrawBitmap (bitmap, null, Rect(50, 50, 500, 500), mPaint) /** * @param x * @param Y */ canvas? .scale(0.8f, 0.8f, 600f, 600f) Canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

Rotate: rotating
canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), MPaint) /** * @param rotation Angle * @param rotation center point x left * @Param rotation center point Y left */ canvas? .rotate(30f, 700f, 700f) canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

Skew: wrong cut
canvas? DrawBitmap (bitmap, null, Rect(50, 50, 500, 500), mPaint) /** * @param x * @param y */ canvas? The skew (0.5 f, 0 f) canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

Canvas can also use Matrix to complete transformation. See the function of Matrix later

Clipping function of Canvas

ClipRect: Rectangular clipping
/** * @param clipped rectangle */ canvas? .clipRect(Rect(150, 150, 400, 400)) canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

ClipRect: path clipping
Val path = path () path.addCircle(300f, 300f, 100f, path.direction.cw) /** * @param trimmed path */ canvas? .clipPath(path) canvas? .drawBitmap(bitmap, null, Rect(50, 50, 500, 500), mPaint)Copy the code

Canvas save and restore

Save (): used to save the state of Canvas, the code after save() method, can call the Canvas pan, shrink, rotate, crop and other operations! Restore () : used to restore the state saved by the Canvas (think of it as the state saved by the coordinate axes) to prevent the operation performed on the Canvas after the code of the save() method from affecting the subsequent drawing. This method can avoid the collateral influence

Call Save multiple times to save the state of the Canvas. The state information is stored in a stack structure. Each call to Restore restores to the previous stored state

override fun onDraw(canvas: Canvas?) { canvas? .save() canvas? .rotate(30f) mPaint.color = Color.RED canvas? .drawLine(0f, 0f, 100f, 0f, mPaint) canvas? .save() mPaint.color = Color.GREEN canvas? .rotate(30f) canvas? .drawLine(0f, 0f, 100f, 0f, mPaint) canvas? .save() mPaint.color = Color.BLUE canvas? .rotate(30f) canvas? .drawLine(0f, 0f, 100f, 0f, mPaint) canvas? .restoreToCount(1) mPaint.color = Color.BLACK canvas? .drawLine(0f, 0f, 100f, 0f, mPaint) }Copy the code

Save also has an overloaded method, which needs to pass a saveFlag. The meanings and application scope of these flags are as follows:

canvas? .drawcolor (color.red) /** * @param Layer information store bitmap size * @param brush * @param saveFlag */ canvas? .saveLayer(RectF(0f, 0f, 500f, 500f), mPaint, Canvas.ALL_SAVE_FLAG) canvas? .rotate(30f) mPaint.style = Paint.Style.FILL mPaint.color = Color.GREEN canvas? .drawRect(Rect(0, 0, 800, 800), mPaint) canvas? .restore() mPaint.style = Paint.Style.STROKE canvas? .drawRect(Rect(0, 0, 800, 800), mPaint)Copy the code

These are some of the main uses of canvas