Android Canvas画布的详解与使用，以及View的绘画(一)
Canvas：画布
* The Canvas class holds the "draw" calls. To draw something, you need * 4 basic components: A Bitmap to hold the pixels, a Canvas to host * the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, * Path, text, Bitmap), and a paint (to describe the colors and styles for the * drawing)
译文：
Canvas类保存“draw”调用。要绘制一些东西，您需要4个基本组件：一个用于保存像素的位图、一个用于承载绘制调用（写入位图）的画布、一个绘图原语（例如矩形、路径、文本、位图）和一个油漆（用于描述图纸）
我们常见的理解属于一个画布，只要作画就需要画布，至于在画布上画什么，由参与者自己决定。
图形组合：
任何图形都可以通过点、线、面来完成，如何做到完美的绘画者，我们需要知道Canvas的api都提供了什么，他能干什么
作画需要什么？
1.笔：Paint
2.画布：Canvas
有了笔和画笔，基本可以画很多东西。
Paint
画笔提供了最基础的绘画功能，颜色、画笔大小、样式等。我们只需要简单的设计几个参数就可以使用
- setColor(); //设置画笔的颜色
- setAntiAlias(); //设置画笔的锯齿效果
- setARGB(); //设置画笔的A、R、G、B值
- setAlpha(); //设置画笔的Alpha值
- setTextSize(); //设置字体的尺寸
- setStyle(); //设置画笔的风格（空心或实心）
- setStrokeWidth(); //设置空心边框的宽度
有这几种参数，基本就可以完成笔的设置，如果想个性化画笔，可以参考其他Paint的API
Canvas 常用的API的介绍：
1.绘画矩形：drawArc
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
@NonNull Paint paint)
RectF ：画布的大小
startAngle： 开始角度，这个值只能决定图形的开始角度，不能改变图的开角角度。
sweepAngle：扫描的角度，正常就是图形的角度
useCenter:是否以中心旋转，如果是，画中的扇形中心在圆中心，否则就是一个普通的扇形
paint：画笔
1.1拼色扇形
在一些统计图中，我们经常看到百分比的统计图，这是怎么做到的呢？其实这类图做法也是通过绘制图形完成，但是绘制的时候需要注意图层问题。
注意1.Canvas是一层一层绘制的，如果处理多图形拼图，最大层应该在最下方。
RectF rectF = new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight());
if (paint == null) {
paint = new Paint();
}
paint.setColor(Color.RED);
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.FILL);
canvas.drawArc(rectF, 0, 360, true, paint);
canvas.save();
paint.setColor(Color.YELLOW);
canvas.drawArc(rectF, 0, 150, true, paint);
paint.setColor(Color.BLUE);
canvas.drawArc(rectF, 0, 90, true, paint);
paint.setColor(Color.GRAY);
canvas.drawArc(rectF, 0, 30, true, paint);这里面有四种扇形，红色、黄色、绿色、灰色
灰色开角：30
绿色开角：90
黄色开角：150
红色开角：360(圆形)
视觉上：
灰色：30°
绿色：60°
黄色：60°
红色：210°
技巧：
先算出各个角度，再计算出各个扇形的开角。注意先绘制大图形，再绘制小的，否则360°先绘制会导致图形的遮挡问题
1.2绘制路径：drawPath
public void drawPath(@NonNull Path path, @NonNull Paint paint)
path：路径值，又因为path可以完成各种路径的构建，关于path会单独讲解
正常path绘制很多东西，如果组成一个画面由三个点
paint：画笔
private void drawPath(Canvas canvas) {
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(300, 300);
path.lineTo(200,300);
path.close();
canvas.drawPath(path, paint);
}1.3组合绘图，绘制复杂的图形或者需要耗时较长，可以通过该方法：drawPicture
public void drawPicture(@NonNull Picture picture)
picture：图片或者海报
1.4 绘制色块，这个色块类似一个填充色，以ARGB颜色来完成drawARGB
public void drawARGB(int a, int r, int g, int b)
a:透明度
r:红色
g:绿色
b:蓝色
值可以参考色值：0-255，2^8-1
1.4-1绘制bitmap资源：drawBitmap
public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)
bitmap：bitmap资源
left:从布局左边的坐标点，类似View的X轴
top:从布局的顶部的坐标点，类似View的Y轴
paint：画笔
private void drawBitmap(Canvas canvas)
{
canvas.drawBitmap(getBitmap(),0,0,paint);
canvas.save();
}
1.4图片扭曲特效：drawBitmapMesh
public void drawBitmapMesh(@NonNull Bitmap bitmap, int meshWidth, int meshHeight,
@NonNull float[] verts, int vertOffset, @Nullable int[] colors, int colorOffset,
@Nullable Paint paint)
参数:
1.bitmap：指定需要扭曲的源位图。
2.meshwidth：该参数控制在横向上把该源位图划分成多少格。
3.meshheight：该参数控制在纵向上把该源位图划分成多少格。
4.verts：该参数是一个长度为( meshwidth+1)(meshheight+1)2的数组，它记录了扭曲后的位图各“顶点”(网格线的交点)位置。虽然它是个一维数组，实际上它记录的数据是形如(x0,y0)、(x1,y1)、(x2，y2)、(xN,yN)格式的数据，这些数组元素控制对 bitmap位图的扭曲效果。
5.vertOffset:控制verts数组中从第几个数组元素开始才对 bitmap进行扭曲(忽略veroffset之前数据的扭曲效果)。
floa[] verts={(x1,y1)(x2,y2)},扭曲坐标点，奇数是y轴，偶数是x轴
1.5画圆：drawCircle
public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
cx：圆心x轴坐标
cy：圆心y轴坐标
radius：半径
paint：画笔
canvas.drawCircle(100,100,100,paint);
1.5划线：drawLine
public void drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)
private void drawLine(Canvas canvas) {
paint.setStrokeWidth(100);
canvas.drawLine(0, 500, 500, 500, paint);
}
startX：起点x坐标
startY：起点y坐标
stopX：终点x坐标
stopY：终点y坐标
paint：画笔
由于线段是两点确定，所以(startX,startY)是起点，（stopX，stopY）是重点
如果想这条线很宽。通过设置画笔的宽度 paint.setStrokeWidth(100);
1.6画椭圆：drawOval
public void drawOval(@NonNull RectF oval, @NonNull Paint paint)
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)
oval(left,top,right,buttom)：椭圆的画布
private void drawOval(Canvas canvas) {
int width=getMeasuredWidth();
int height=getMeasuredHeight()/3;
canvas.drawOval(0,0,width,height,paint);
}
1.7绘制画笔：drawPaint
public void drawPaint(@NonNull Paint paint)
paint：这个画笔绘制出来就是当前view的颜色，填充满整个画布
private void drawPaint(Canvas canvas) {
canvas.drawPaint(paint);
}
1.8绘制补丁：drawPatch
public void drawPatch(@NonNull NinePatch patch, @NonNull Rect dst, @Nullable Paint paint)
NinePatch ：点九资源
Rect ：绘制区域
Bitmap bitmap=getBitmap(); NinePatch patch=new NinePatch(bitmap,bitmap.getNinePatchChunk());
1.9绘制点：drawPoint
public void drawPoint(float x, float y, @NonNull Paint paint)
x:点的x轴坐标
y:点的y轴
点的大小取决于paint的画笔
private void drawPoint(Canvas canvas) {
paint.setStrokeWidth(20);
canvas.drawPoint(100, 100, paint);
}
1.10绘制文字从点pos出发：drawPosText
public void drawPosText(@NonNull String text, @NonNull @Size(multiple = 2) float[] pos,
@NonNull Paint paint)
private void drawPosText(Canvas canvas) {
float[] pos = new float[]{100, 100};
canvas.drawPosText("Hellow", pos, paint);
}
float[] pos:坐标，(x,y)
1.11绘制矩形区域：drawRect
public void drawRect(@NonNull RectF rect, @NonNull Paint paint)
RectF ：绘制区域
private void drawRect(Canvas canvas) {
RectF rectF=new RectF(0,0,500,500);
canvas.drawRect(rectF,paint);
}
1.12绘制色域：drawRGB
public void drawRGB(int r, int g, int b)
public void drawColor(@ColorInt int color) {
nDrawColor(mNativeCanvasWrapper, color, PorterDuff.Mode.SRC_OVER.nativeInt);
}
一般绘制单个对象，如果不指定区域，默认大小是当前view的宽和高
public void drawRGB(Canvas canvas) {
canvas.drawRGB(200, 200, 200);
}
1.13在矩形内绘制圆角：drawRoundRect
public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
RectF ：代表绘制区域
rx：圆角在在矩形内的坐标x轴
ry：圆角在在矩形内的坐标y轴
注意：如果rx和ry为0，那么绘制出来的圆角就会0，view就是矩形，如果rx，ry在矩形正中心，那么绘制出来的圆角就是圆形
1.如果x和y都小于矩形的宽和高，那么显示就是矩形四个角被裁剪
2.如果x和y都大于矩形的宽和高，那么显示就是圆
3.如果x和y存在一个小于宽和高，那么显示可能是一个不规则图形
public void drawRoundRect(Canvas canvas)
{
RectF rectF=new RectF(0,0,200,200);
canvas.drawRoundRect(rectF,10,10,paint);
} 
1.14绘制字符：drawText
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
绘制的时候，paint style必须设置成paint.setStyle(Paint.Style.FILL);否则会出现一团
private void drawText(Canvas canvas)
{
paint.setTextSize(100);
canvas.drawText("你好",100,100,paint);
}text：内容
x:位置的x轴坐标
y:位置的y轴坐标
解释：文字的样式和大小，都是通过paint来设置，关于paint可以自行查看
1.15绘制文本按路径显示：drawTextOnPath
public void drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
float vOffset, @NonNull Paint paint)
* @param text The text to be drawn * @param path The path the text should follow for its baseline * @param hOffset The distance along the path to add to the text's starting position * @param vOffset The distance above(-) or below(+) the path to position the text * @param paint The paint used for the text (e.g. color, size, style)
text ：绘制的文本信息
path:路径，最终文本文字会按路径显示
hOffset ：沿路径添加到文本起始位置的距离
vOffset ：定位文本的路径上方（-）或下方（+）的距离
paint ：画笔
private void drawTextOnPath(Canvas canvas) {
paint.setTextSize(100);
Path path=new Path();
path.moveTo(0,500);
path.lineTo(500,500);
path.lineTo(500,0);
path.close();
canvas.drawTextOnPath("Hello word just do it",path,100,100,paint);
}
1.16绘制运行中的文本：drawTextRun
public void drawTextRun(@NonNull CharSequence text, int start, int end, int contextStart,
int contextEnd, float x, float y, boolean isRtl, @NonNull Paint paint)
* @param text the text to render * @param start the start of the text to render. Data before this position can be used for * shaping context. * @param end the end of the text to render. Data at or after this position can be used for * shaping context. * @param contextStart the index of the start of the shaping context * @param contextEnd the index of the end of the shaping context * @param x the x position at which to draw the text * @param y the y position at which to draw the text * @param isRtl whether the run is in RTL direction * @param paint the paint
text：
start ：内容开始索引
end ：内容结束的索引
contextStart ：塑造语境的起点索引,默认从0开始，
contextEnd 塑造语境的终结索引默认text的长度
isRtl :运行是否在RTL方向
（x ，y）：坐标
private void drawTextRun(Canvas canvas)
{
paint.setTextSize(100);
CharSequence text="Hello word just do it";
canvas.drawTextRun(text,0,text.length(),0,text.length(),100,100,true,paint);
canvas.drawTextRun(text,0,text.length(),0,text.length(),100,600,false,paint);
}
1.17绘制顶点集合,绘制多边形：drawVertices
public void drawVertices(@NonNull VertexMode mode, int vertexCount, @NonNull float[] verts,
int vertOffset, @Nullable float[] texs, int texOffset, @Nullable int[] colors,
int colorOffset, @Nullable short[] indices, int indexOffset, int indexCount,
@NonNull Paint paint)
1. mode： 如何解释顶点数组 2. vertexCount：顶点数组中的值数（如果非空，则为相应的texs和颜色数组）。每个逻辑顶点都是两个值（x，y），vertexCount必须是2的倍数 3. verts：网格的顶点数组 4. vertOffset:绘制前要跳过的顶点中的值数 5. texs:可能为空。如果不为空，则指定要采样到当前着色器中的坐标（例如位图平铺或渐变） 6. texOffset:绘制前要跳过的texs中的值数 7. colors:可能为空。如果不为空，则为每个顶点指定一种颜色，以便在三角形上进行插值。 8. colorOffset:绘制前要跳过的颜色值的数目 9. indices:如果不为null，则引用到顶点（texs，colors）数组的索引数组 10. indexCount:索引数组中的条目数（如果不为空）。
二、最终总结表如下
Canvas的经常使用操作
| 操作类型 | 相关API | 备注 |
|---|---|---|
| 绘制颜色 | drawColor, drawRGB, drawARGB | 使用单一颜色填充整个画布 |
| 绘制基本形状 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧 |
| 绘制图片 | drawBitmap, drawPicture | 绘制位图和图片 |
| 绘制文本 | drawText, drawPosText, drawTextOnPath | 依次为 绘制文字、绘制文字时指定每一个文字位置、依据路径绘制文字 |
| 绘制路径 | drawPath | 绘制路径。绘制贝塞尔曲线时也须要用到该函数 |
| 顶点操作 | drawVertices, drawBitmapMesh | 通过对顶点操作能够使图像形变，drawVertices直接对画布作用、 drawBitmapMesh仅仅对绘制的Bitmap作用 |
| 画布剪裁 | clipPath, clipRect | 设置画布的显示区域 |
| 画布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数 |
| 画布变换 | translate, scale, rotate, skew | 依次为 位移、缩放、 旋转、错切 |
| Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移。缩放等操作的都是图像矩阵Matrix，仅仅只是Matrix比較难以理解和使用。故封装了一些经常使用的方法。 |