自定义控件基础----Canvas

一、坐标系：

1、

getTop();       //获取子View左上角距父View顶部的距离
getLeft();     //获取子View左上角距父View左侧的距离
getBottom();   //获取子View右下角距父View顶部的距离

getRight();     //获取子View右下角距父View左侧的距离

2、MotionEvent中get和getRaw的区别：

event.getX();       //触摸点相对于其所在组件坐标系的坐标
event.getY();

event.getRawX();    //触摸点相对于屏幕默认坐标系的坐标

event.getRawY();

二、角度和弧度：

1、角度是60进制，弧度是10进制

名称	定义
角度	两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度.
弧度	两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度.

2、公式：

rad 是弧度， deg 是角度

3、默认的屏幕坐标中角度增大方向为顺时针。

三、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比较难以理解和使用，故封装了一些常用的方法。

1、初始化画笔：

// 1.创建一个画笔
private Paint mPaint = new Paint();

// 2.初始化画笔
private void initPaint() {

 mPaint.setColor(Color.BLACK);       //设置画笔颜色

 mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充,STROKE:描边 FILL_AND_STROKE 描边加填充

 mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
}

// 3.在构造函数中初始化
public SloopView(Context context, AttributeSet attrs) {
   super(context, attrs);
   initPaint();
}


2、绘制一个点或一组点：

canvas.drawPoint(200, 200, mPaint);     //在坐标(200,200)位置绘制一个点
canvas.drawPoints(new float[]{          //绘制一组点，坐标位置由float数组指定
      500,500,
      500,600,
      500,700

},mPaint);

3、绘制一条线或一组线：

canvas.drawLine(300,300,500,600,mPaint);    // 在坐标(300,300)(500,600)之间绘制一条直线
canvas.drawLines(new float[]{               // 绘制一组线 每四数字(两个点的坐标)确定一条线
    100,200,200,200,
    100,300,200,300
},mPaint);


4、绘制矩形：

（1）根据矩形左上角和右下角两个点的坐标

canvas.drawRect(100,100,800,400,mPaint);

（2）先将矩形封装为Rect或RectF,然后传递给Canvas绘制

// 第二种
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);

// 第三种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);


5、绘制圆角矩形：

（1）需要左上角和右下角两个点的坐标，圆角的x和y的长度

// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);



// 第二种

canvas.drawRoundRect(100,100,800,400,30,30,mPaint);  （API21）

6、绘制椭圆：

需要左上角和右下角两个点的坐标（长和宽相同为圆）

// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);

// 第二种
canvas.drawOval(100,100,800,400,mPaint);

7、绘制圆：

（1）、（500，500）为圆心，400为直径。

canvas.drawCircle(500,500,400,mPaint);// 绘制一个圆心坐标在(500,500)，半径为400 的圆。

8、绘制圆弧：

// 第一种
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
    
// 第二种
public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

startAngle // 开始角度

sweepAngle // 扫过角度

useCenter   // 是否使用中心 ，为true时为扇形，为false时形成开始点到结束点的弧形

RectF rectF = new RectF(100,100,600,600);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);

//-------------------------------------

RectF rectF2 = new RectF(100,700,600,1200);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);

9、画布：

相关操作	简要介绍
save	保存当前画布状态
restore	回滚到上一次保存的状态
translate	相对于当前位置位移
rotate	旋转

canvas.translate(mWidth/2,mHeight/ 2);// 将画布坐标原点移动到中心位置

四、Canvas 基本操作：

1、位移：移动整个坐标系（原点的位置）,每次的移动是基于当前位置移动

mPaint.setColor(Color.BLACK);

canvas.translate(200,200);  //（坐标0，0）移到（200，200） 开始画圆

canvas.drawCircle(0,0,100,mPaint);

2、缩放：

public void scale (float sx, float sy)



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

//sx，sy 分别是x和y轴的缩放比例， px，py 控制缩放中心（默认是原点）

取值范围(n)	说明
[-∞, -1)	先根据缩放中心放大n倍，再根据中心轴进行翻转
-1	根据缩放中心轴进行翻转
(-1, 0)	先根据缩放中心缩小到n，再根据中心轴进行翻转
0	不会显示，若sx为0，则宽度为0，不会显示，sy同理
(0, 1)	根据缩放中心缩小到n
1	没有变化
(1, +∞)	根据缩放中心放大n倍

3、旋转：默认旋转中心是原点

public void rotate (float degrees)

public final void rotate (float degrees, float px, float py)

px，py是旋转中心，degrees是旋转角度

4、错切（skew）：

publicvoidskew(floatsx,floatsy)

float sx:将画布在x方向上倾斜相应的角度，sx倾斜角度的tan值，

float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值.

5、快照(save)和回滚(restore)：

相关API	简介
save	把当前的画布的状态进行保存，然后放入特定的栈中
saveLayerXxx	新建一个图层，并放入特定的栈中
restore	把栈中最顶层的画布状态取出来，并按照这个状态恢复当前的画布
restoreToCount	弹出指定位置及其以上所有的状态，并按照指定位置的状态进行恢复
getSaveCount	获取栈中内容的数量(即保存次数)

（1）save：

// 保存全部状态
public int save ()

// 根据saveFlags参数保存一部分状态
public int save (int saveFlags)

saveFlags参数，使用这个参数可以只保存一部分状态

（2）restore：

状态回滚，就是从栈顶取出一个状态然后根据内容进行恢复。

四、Canvas操作图片文字：

1、绘制图片：

（1）drawPicture

picture 录的是Canvas中绘制的内容，下次需要用的时候拿来能用。

相关方法	简介
public int getWidth ()	获取宽度
public int getHeight ()	获取高度
public Canvas beginRecording (int width, int height)	开始录制 (返回一个Canvas，在Canvas中所有的绘制都会存储在Picture中)
public void endRecording ()	结束录制
public void draw (Canvas canvas)	将Picture中内容绘制到Canvas中
public static Picture createFromStream (InputStream stream)	(已废弃)通过输入流创建一个Picture
public void writeToStream (OutputStream stream)	(已废弃)将Picture中内容写出到输出流中

内容需要手动调用绘制

序号	简介
1	使用Picture提供的draw方法绘制。
2	使用Canvas提供的drawPicture方法绘制。
3	将Picture包装成为PictureDrawable，使用PictureDrawable的draw方法绘制。

// 将Picture中的内容绘制在Canvas上（低版本会影响Canvas状态，一般不会使用）

mPicture.draw(canvas);

public void drawPicture (Picture picture)

public void drawPicture (Picture picture, Rect dst)

public void drawPicture (Picture picture, RectF dst)

canvas.drawPicture(mPicture,newRectF(0,0,mPicture.getWidth(),200));

// 包装成为Drawable
PictureDrawable drawable = new PictureDrawable(mPicture);
// 设置绘制区域 -- 注意此处所绘制的实际内容不会缩放
drawable.setBounds(0,0,250,mPicture.getHeight());
// 绘制
drawable.draw(canvas);

（2）drawBitmap:

// 第一种
public void drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint)

// 第二种
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)

// 第三种
public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)

后两个参数(matrix, paint)是在绘制的时候对图片进行一些改变

src:指定绘制图片的区域，dst： 指定图片在屏幕上显示的区域

2、绘制文字：

// 第一类
public void drawText (String text, float x, float y, Paint paint)

public void drawText (String text, int start, int end, float x, float y, Paint paint)

public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)//包含start，不包含end

public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二类
public void drawPosText (String text, float[] pos, Paint paint) //指定每个字符的位置
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三类
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)

public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

第一类只能指定文本基线位置位置(基线x默认在字符串左侧，基线y默认在字符串下方)。

第二类可以分别指定每个文字的位置。

第三类是指定一个路径，根据路径绘制文字。

Paint文本相关方法：

标题	相关方法	备注
色彩	setColor setARGB setAlpha	设置颜色，透明度
大小	setTextSize	设置文本字体大小
字体	setTypeface	设置或清除字体样式
样式	setStyle	填充(FILL),描边(STROKE),填充加描边(FILL_AND_STROKE)
对齐	setTextAlign	左对齐(LEFT),居中对齐(CENTER),右对齐(RIGHT)
测量	measureText	测量文本大小(注意，请在设置完文本各项参数后调用)

相关学习链接：http://www.gcssloop.com/customview/CustomViewIndex