新手学自定义View系列(一)之canvas绘制API

简述:

1. Android中自定义View开发的遇到的问题？

   Android开发中自定义View可以说是常见的技术，不管是新手还是老司机都非常了解。但是目前Android自定义View的现状是很多人对自定义View都能说得出来一些，但是实际上根据需求开发起来却比较难。老实说这也是我之前的想法，我也一直在思考这个原因，个人觉得原因是:
   第一 对自定义View中的API不熟悉;
   第二 对自定义View没有一个系统认识和深入了解;
   第三 对掌握的自定义View的掌握没有一个分类管理思想;

2. canvas绘制的API的细节深入的学习能解决什么问题？
   此篇博客canvas的API的学习可以系统掌握canvas.drawxxx()系列的方法
   以及绘制原理。

3. 本系列博客能给你带来什么？
   个人认为Android中的自定义View API的学习主要分为几个方面：
   第一 Canvas绘制系列的API的学习；
   第二 Paint 画笔系列的API的学习；
   第三 辅助绘制(clipxxx系列方法)canvas的几何变换(位移、旋转、错切)API的学习；
   第四 自定义View的测量、绘制(onMeasure、onSizeChange、onDraw)；
   第五 自定义ViewGroup的测量、布局、绘制(onMeasure、onSizeChange、onLayout、onDraw)；
   第六 事件分发、事件拦截、滑动冲突以及触摸反馈的接口的回调设计；

---

1、canvas绘制颜色

一般用于在绘制之前设置底色，或者在绘制之后为界面设置半透明蒙版
canvas中绘制颜色主要几种方法:

• canvas.drawColor(int color)
• canvas.drawRGB(int r, int g, int b)
• canvas.drawARGB(int a, int r, int g, int b)

canvas.drawColor(Color.parseColor("#00bfa5"));//int color
canvas.drawRGB(100, 200, 100);//设置red值(0~255),green值(0~255),blue值(0~255)
canvas.drawARGB(100, 100, 200, 100);//设置alpha值(0~255),设置red值(0~255),green值(0~255),blue值(0~255)

2、canvas绘制形状

• 绘制圆形:
• canvas.drawCircle(float dx, float dy, float radius, Paint paint)

mPaint.setStyle(Paint.Style.FILL);//设置填充style为FILL
mPaint.setStyle(Paint.Style.STROKE);//设置填充style为STROKE
canvas.drawCircle(mWidth / 2, mHeight / 2, 200, mPaint);//(dx:圆心横坐标 dy:圆心纵坐标 radius:半径 paint 画笔) 

• 绘制矩形:
  canvas中绘制矩形主要几种方法:
  Rect和RectF的细微区别是Rect的绘制的单位类型是int,而RectF的绘制单位类型是float
• canvas.drawRect(int left, int top, int right, int bottom, Paint paint);
• canvas.drawRect(Rect rect, Paint paint);
• canvas.drawRect(RectF rectF, Paint paint);

mPaint.setStyle(Paint.Style.FILL);//设置填充style为FILL
mPaint.setStyle(Paint.Style.STROKE);//设置填充style为STROKE
mPaint.setColor(Color.parseColor("#e91e63"));
canvas.drawRect(mWidth / 2 - 200, 200, mWidth / 2 + 200, 600, mPaint);//left:矩形的左边离Y轴的距离；top:矩形的顶边离X轴的距离；right的右边离Y轴的距离；bottom:矩形的底部边离X轴的距离

• 绘制圆角矩形:
  canvas绘制圆角矩形主要有两个方法:
  但是这两个方法是等价的，绘制出来的效果都是一样的。
• drawRoundRect(RectF rect, float rx, float ry, Paint paint)
• drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

int rx = 80;//圆角矩形的圆角所处的椭圆的横向半径
int ry = 40;//圆角矩形的圆角所处的椭圆的纵向半径
int left = mWidth / 2 - 200;//left:矩形的左边离Y轴的距离；
int top = 200;//top:矩形的顶边离X轴的距离；
int right = mWidth / 2 + 200;//right的右边离Y轴的距离；
int bottom = 400;//bottom:矩形的底部边离X轴的距离

mPaint.setStyle(Paint.Style.FILL);//设置填充style为FILL
mPaint.setStyle(Paint.Style.STROKE);//设置填充style为STROKE
mPaint.setStrokeWidth(5f);//设置stroke线形的宽度
mPaint.setColor(Color.parseColor("#e91e63"));

canvas.drawRoundRect(left, top, right, bottom, rx, ry, mPaint);//绘制圆角矩形