The basic use of the Canvas - described conventional drawing method

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u011118524/article/details/78108125

Canvas canvas face means that, in fact, is a method of packaging a lot of drawing tools.
There are four basic image rendering elements:

1. Bitmap save for a pixel.
2. A tool used to perform drawing operations Canvas class.
3. Things to draw, draw a straight line as indicated, draw text and various other things we want to draw.
4. Draw Paint brushes used.

A, Canvas Api basic introduction:
1, painting used API:

Image background:

/**
     *把整个画布用指定的颜色填充
     * @param r 红色值
     * @param g 绿色值
     * @param b 蓝色值
     */
public void drawRGB(int r, int g, int b)
//同上，只是加上了alpha透明度
public void drawARGB(int a, int r, int g, int b)
public void drawColor(@ColorInt int color)//同上
/**
     * 把整个画布根据指定的模式用指定的颜色填充
     * @param color 颜色值
     * @param mode  详细看PorterDuff.Mode
     */
    public void drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode)

/**
     * 使用指定的画笔，绘制一个尽可能大的矩形，即填充画布
     * @param paint The paint used to draw onto the canvas
     */
public void drawPaint(@NonNull Paint paint)

drawPaint method should be noted that, Paint brushes need to specify a color with the color values ​​of transparency, in order to fill the canvas with color specified value, if not specified color values, then filled by this method will be black.

Paint paint = new Paint();
paint.setColor(0xaadc2e07);//如果没有指定颜色，那么画布就变成黑色了
canvas.drawPaint(paint);//画笔整个变为浅红色

The following continue to introduce painting Api:

**

Draw points:

**

/**
* 在指定的左边x，y处画一个点，点的大小与Paint设置的setStrokeWidth有关，如果不设置线宽，无法绘制点
*/*
public void drawPoint(float x, float y, @NonNull Paint paint);
/** 
 * 参数1：多个点，每两个值为一个点。最后个数不够两个的值，忽略。 
 * [x0 y0 x1 y1 x2 y2 ...]
 */  
public void drawPoints(@Size(multiple=2) @NonNull float[] pts, @NonNull Paint paint);

/**
     *从点坐标数组pts中offset位置开始取count个数值，然后在画布上画出这些点
     * @param pts  点坐标数组，一个点2个值 [x0 y0 x1 y1 x2 y2 ...]
     * @param offset 从pts数组offset位置开始取值
     * @param count  在pts数组总共取多少个数值，offset+count<=pts.length
     * @param paint  画笔
     */
public void drawPoints(@Size(multiple=2) float[] pts, int offset, int count,
            @NonNull Paint paint)

Such as:

Paint paint = new Paint();
paint.setColor(0xaadc2e07);
float fp[]=new float[]{100,100,100,250,100,400,100,550};
paint.setStrokeWidth(100);
canvas.drawPoints(fp,3,4,paint);//从坐标点数组fp中脚标为3的地方开始取值，总共取4个值出来，即fp[3],fp[4],fp[5],fp[6]。

Results are as follows:

you can see here the point is drawn at right angles, but not as we know the point is round, because the impact of Paint brush. Imagine if our party is written, then the painting (like stamp) point out, that is square, and if we tip is round, then painted point is rounded up. You may be provided by a pen cap style setStrokeCap method of Paint.

Paint paint = new Paint();
paint.setColor(0xaadc2e07);
float fp[]=new float[]{100,100,100,250,100,400,100,550};
paint.setStrokeWidth(100);
paint.setStrokeCap(Paint.Cap.ROUND);//圆角
canvas.drawPoints(fp,3,4,paint);

effect:

Some explanations do for setStrokeCap ​​method:

• Paint setStrokeCap ​​methods have the shape drawn when the two segment end points can be set, i.e. the shape of a line segment drawn end cap, when the method mentioned below drawLine will be described in detail, in fact, the method can also affect the shape setStrokeCap ​​stippled. Paint the setStrokeCap ​​method can have three values: Paint.Cap.BUTT, Paint.Cap.ROUND and Paint.Cap.SQUARE.
• Paint getStrokeCap ​​of the return value is the default Paint.Cap.BUTT, the default point is drawn out of a square, i.e., a first point on the map is drawn end cap as BUTT.
• We can call setStrokeCap ​​method is provided of Paint strokeCap ​​Paint.Cap.ROUND, making strokes out point is a circle, i.e. with the ROUND FIG end cap as painting.
• Call call setStrokeCap ​​method to set the strokeCap ​​Paint is Paint.Cap.SQUARE, making strokes out of power is a square, drawn with the same effect on the appearance BUTT

Draw lines:

/**
     * 根据指定的起始点坐标，画一条直线
     *
     * @param startX 起始点x坐标
     * @param startY 起始点y坐标
     * @param paint  画笔
     */
public void drawLine(float startX, float startY, float stopX, float stopY, Paint paint);

public void drawLines(@Size(multiple=4) @NonNull float[] pts, @NonNull Paint paint);

/**
     *与drawPoints方法类似
     * @param pts  直线坐标点 [x0 y0 x1 y1 x2 y2 ...]
     * @param offset  坐标偏移值
     * @param count   从pts中取多少个值
     * @param paint    画笔
     */
public void drawLines(@Size(multiple=4) @NonNull float[] pts, int offset, int count,
            @NonNull Paint paint)

Draw a rectangle:

 /**
     * 根据Rect指定的值画矩形，RectF与Rect的区别在于RectF存float型的坐标数据
     *
     * @param r        指定的矩形区域
     * @param paint    画笔
     */
public void drawRect(@NonNull Rect r, @NonNull Paint paint);
public void drawRect(@NonNull RectF rect, @NonNull Paint paint);
/**
     * 由指定的矩形的四个顶点画矩形
     * @param left   The left side of the rectangle to be drawn
     * @param top    The top side of the rectangle to be drawn
     * @param right  The right side of the rectangle to be drawn
     * @param bottom The bottom side of the rectangle to be drawn
     * @param paint  The paint used to draw the rect
     */
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)

Draw Ellipse:

/**
* 在指定的左边区域内画椭圆
*/
public void drawOval(@NonNull RectF oval, @NonNull Paint paint);
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)

Circle:

/**
     * 根据指定的圆心坐标和半径画圆
     * @param cx     圆心x坐标
     * @param cy     圆心y坐标
     * @param radius 圆半径
     * @param paint  画笔
     */
    public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

Draw an arc (a fan):

/**
 * 根据指定的起始角度在指定的区域内画出指定角度的圆弧或者扇形（如果画笔的mPaint.setStyle(Paint.Style.FILL);则画出来的是扇形，且useCenter为true）；以指定的矩形区域中心点为圆心，画内切圆弧。
* @param oval   画圆弧的区域
* @param startAngle 画圆弧的起始角度，钟表3点钟方向为0度，逆时针方向为负值，顺时针方向为正值
* @param sweepAngle 画多少角度的圆弧
* @param useCenter 如果为false：只有一个纯弧线，为true：闭合的边
* @param paint     画笔
*/
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,l Paint paint);
/**
*同上
*/
public void drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

Such as:

RectF r = new RectF(100, 100, 400, 800);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLUE);
canvas.drawRect(r, mPaint);
mPaint.setColor(Color.RED);
canvas.drawArc(r, -90, 90f, false, mPaint);//如果指定区域是一个正方形，则画出来的是圆形弧（或圆），如果是长方形，则画出的是椭圆弧（或椭圆）

Results are as follows:

Videos inner oval cut:

RectF r = new RectF(100, 100, 400, 800);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLUE);
canvas.drawRect(r, mPaint);
mPaint.setColor(Color.RED);
canvas.drawArc(r, 0, 360f, false, mPaint);//在指定的局域r里面，画出一个内切圆

Renderings:

Draw a closed arc:

RectF r = new RectF(100, 100, 400, 800);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLUE);
canvas.drawRect(r, mPaint);
mPaint.setColor(Color.RED);
canvas.drawArc(r, -90, 90f, true, mPaint);//画封闭的圆弧

Results are as follows:

Painting Rounded Rectangle:

/**
* 画圆角矩形
* @param rect  矩形区域
* @param rx    x轴圆角半径
* @param ry    y轴圆角半径
* @param paint 画笔
*/
public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint);
public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,
            @NonNull Paint paint)

Picture:

/*
 * @param bitmap 需要绘制的图片
 * @param left   开始绘制图片的左上角的x坐标
 * @param top    开始绘制图片的左上角的y坐标
 * @param paint  画笔
     */
public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint);

/*
 * @param bitmap 绘制的图片
 * @param src   见下面解释
 * @param dst    
 * @param paint 画笔
     */
public void drawBitmap(Bitmap bitmap,Rect src,RectF dst,Paint paint);
public void drawBitmap(Bitmap bitmap,Rect src,Rect dst,
            @Nullable Paint paint);
/**
  * 根据指定的矩阵绘制图片
  * @param bitmap 需要绘制的图片
  * @param matrix 矩阵
  * @param paint  画笔
  */
public void drawBitmap(@NonNull Bitmap bitmap, @NonNull Matrix matrix, @Nullable Paint paint)

This method has two functions:
1. draw only a portion of the original bitmap object.
2. You can also draw the bitmap to be scaled to the specified area.

• Draw only a portion of the original bitmap object:
  We know Bitmap is a rectangle whose width and height are there, it said in a bitmap object itself as the coordinate system (origin in the upper left corner bitmap), we can build a Rect object, if meet left is 0, top to 0, right for the width of the bitmap, bottom is the height of the bitmap, then say the name we want to draw the entire Bitmap. But sometimes we just want to draw a portion of the Bitmap, for example, as shown in the figure above us, we want to draw only the head region of Android image of how to do it? Our approach is to build a Rect object that defines which parts we want to draw a Bitmap. For example, we specify that we draw only 1/3 of the subject's head position through code bitmap srcRect.bottom = (int) (0.33 * bitmap.getHeight ()), i.e., the image head portion Android, we will use the designated draw srcRect when bitmap only draw its head position. Special attention is required, srcRect the left, top, right, bottom values are based Bitmap own local coordinate system based.
• To be drawn bitmap scaling to a specified region:
  Sometimes we will need the original bitmap zoom in or out, as shown above, we will enlarge the original picture, how to do it? We need to specify the types of parameters RectF dstRectF, so Android will tell defined srcRect bitmap scaling to go. I.e., bitmap Android will srcRect scaled to the defined area dstRectF range. Note that, dstRecF here is a coordinate in the coordinate system of the drawing, not Bitmap own local coordinate system. We guarantee code and the same aspect ratio srcRect dstRecF in aspect ratio, so as not to cause deformation of image aspect ratio, to see the effect of the second enlarged graphical image above.

View character:

/**
  * 画文字
  * @param text  需要绘制的文字
  * @param x     绘制文字起始点x坐标
  * @param y     绘制文字的基线（baseline）y坐标
  * @param paint 画笔
  */
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) ;

/**
* Draw the text, with origin at (x,y), using the specified paint.
* The origin is interpreted based on the Align setting in the paint.
*
* @param text  绘制的文字内容
* @param start 开始脚标
* @param end   结束脚标
* @param x     x轴偏移量，即文字开始绘制时的x轴坐标
* @param y     baseline的y坐标
* @param paint 画笔
*/
public void drawText(@NonNull String text, int start, int end, float x, float y, Paint paint);
public void drawText(@NonNull char[] text, int index, int count, float x, float y,
            @NonNull Paint paint);//同上，只是文字变成了数组

Calculation of love on the baseline y-coordinate reference another blog post: Canvas Detailed method of drawText

Draw text along a path:

/**
* 沿路径画文字，如沿着圆圈的外边画一串文字等
* @param text     绘制的文字
* @param path     沿着画文字的路径
* @param hOffset  与路径起始点的水平偏移距离
* @param vOffset  与路径中心的垂直偏移量
* @param paint    画笔
*/
public void drawTextOnPath(char[] text, int index, int count,  Path path,float hOffset, float vOffset,Paint paint);
/**
* 同上
*/
public void drawTextOnPath(String text, Path path, float hOffset,float vOffset, @NonNull Paint paint);

Example code:

Paint paint = new Paint();

Path path = new Path();
path.addCircle(500, 500, 300, Path.Direction.CW);//顺时针方向绘制圆
paint.setStrokeWidth(20);
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, paint);

paint.reset();

paint.setColor(Color.RED);
paint.setTextSize(40);
canvas.drawTextOnPath("世界和平！！！", path, 0, -10, paint);

Renderings implementation:

Summary: So far Canvas commonly used method of drawing on the introduction is over, Canvas Api there are other commonly used methods, such as Canvas rotation, scale, etc., in the next blog, we will continue to introduce.