Android 自定义控件之基础几何图形绘制详解

转载请标明出处： http://blog.csdn.net/airsaid/article/details/52562488
本文出自：周游的博客

前言

距离写上一篇自定义View文章已经大半年过去了，一直想继续写，但是无奈技术有限，生怕误人子弟。这段时间项目刚刚完成，有点时间，跟着大神的脚步，巩固下自定义View的相关基础知识。

Canvas&Paint

Canvas和Paint可以理解为现实中的画布和画笔，这两样是绘图必备，首先来详细的了解下这两个。

Paint常用函数

首先来看下Paint的常用函数：
* setColor(int color)：设置画笔颜色。
* setStrokeWidth(float width)：设置画笔宽度。
* setAntiAlias(boolean aa)：设置抗锯齿。
* setStyle(Style style): 设置填充样式。
* setShadowLayer(float radius, float dx, float dy, int shadowColor)：设置阴影。

设置画笔颜色和画笔宽度没什么可说的，设置抗锯齿可以让我们绘制的图形更加圆滑，除了Paint的setAntiAlias()函数可以设置抗锯齿外，也可以通过Canvas设置：

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG)); 

setStyle()

setStyle()函数可以设置如下参数：
* Paint.Style.STROKE：描边。
* Paint.Style.FILL：填充内部。
* Paint.Style.FILL_AND_STROKE：填充内部和描边。
新建个项目，在onDraw函数中分别绘制下，看下都有什么区别：

protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(mLeftX, mLeftY, 100, mPaint);

    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mLeftX * 4, mLeftY, 100, mPaint);

    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(mLeftX * 7, mLeftY, 100, mPaint);
}

运行结果：

通过运行结果可以看到，貌似Paint.Style.FILL和Paint.Style.FILL_AND_STROKE其实并没有什么区别。
但是，如果把画笔的宽度调宽一些：

mPaint.setStrokeWidth(50);

mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mLeftX, mLeftY, 50, mPaint);

mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(mLeftX * 4, mLeftY, 50, mPaint);

运行结果：

可以看出看来，FILL_AND_STROKE其实会把宽度一起填充。

setShadowLayer()

setShadowLayer(float radius, float dx, float dy, int shadowColor)：
* radius：阴影倾斜度。
* dx：水平位移。
* dy：垂直位移。
* shadowColor：阴影颜色。
给文字绘制上阴影：

mPaint.setTextSize(50);
mPaint.setColor(Color.BLUE);
mPaint.setShadowLayer(5, 10, 10, Color.GREEN);
canvas.drawText("Airsaid", mLeftX, mLeftY, mPaint);

运行结果：

Canvas常用函数

Canvas作为画布，含有绘制各种图形的函数，下面根据具体图形来分类进行详细讲解。

绘制背景

• drawColor(int)：绘制画布背景。
• drawRGB(int r, int g, int b)：同上。
• drawARGB(int a, int r, int g, int b)：同上，四个参数取值范围0~255。

绘制一条直线

• drawLine(float startX, float startY,float stopX,float stopY,Paint paint)：
  
  • startX：开始x坐标。
  • startY：开始Y坐标。
  • stopX：结束x坐标。
  • stopY：结束Y坐标。
  • paint：绘制直线所用画笔。
    代码实例：

mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
canvas.drawLine(0, 0, getWidth(), 0, mPaint);

运行结果：

绘制多条直线

• drawLines(float[] pts, Paint paint)：一般绘制多条直线。
  
  • pts：坐标点数据的集合，每４个为一组绘制一条直线。
  • paint：绘制直线所用画笔。
    代码实例：

mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, mPaint);

运行结果：

• drawLines(float[] pts, int offset, int count, Paint paint)：有选择的绘制多条直线。
  
  • pts：坐标点数据的集合，每４个为一组绘制一条直线。
  • offset：跳过的数据个数，跳过的数据将不参与绘制过程。
  • conunt：实际参与绘制的数据个数。
  • paint：绘制直线所用画笔。
    代码示例，跳过一条线的绘制：

mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, 4, 4, mPaint);

运行结果：

绘制单点

• drawPoint(float x, float y,Paint paint)：绘制一个点。
  
  • x：点的x坐标。
  • y：点的y坐标。
  • paint：绘制点所用画笔。
    代码示例：

mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
canvas.drawPoint(100, 100, mPaint);

运行结果：

绘制多点

• drawPoints(float[] pts, Paint paint)：绘制多个点。
  
  • pts：坐标点的数据集合，每两个为一组绘制一个点。
    代码示例（绘制三个点）：

mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, mPaint);

运行结果：

• drawPoints(float[] pts, int offset, int count, Paint paint)： 有选择的绘制多个点。
  
  • pts：参数同上，其他参数同绘制多条线一样。
    代码示例（跳过第1个点，只绘制2个点）：

mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, 2, 4, mPaint);

运行结果：

绘制矩形

• drawRect(Rect r, Paint paint)：根据传入的Rect绘制矩形。
• drawRect(RectF rect, Paint paint)：根据传入的RectF绘制矩形。
• drawRect(float left, float top, float rigth, float bottom, Paint paint)：直接传入矩形的四个点来绘制矩形。
  代码示例（分别使用以上函数绘制三个矩形）：

mPaint.setColor(Color.RED);

Rect rect = new Rect(100, 30, 200, 100);
canvas.drawRect(rect, mPaint);

RectF rectF = new RectF(300, 30, 400, 100);
canvas.drawRect(rectF, mPaint);

canvas.drawRect(500, 30, 600, 100, mPaint);

其中Rect和RectF为矩形辅助类，可根据4个点构建一片矩形区域，用于帮助我们对矩形进行操作。

运行结果：

绘制圆角矩形

• drawRoundRect(RectF rect, float rx, float ry, Paint paint)： 根据传入的RectF绘制圆角矩形。
  
  • rect：要绘制的矩形。
  • rx：x轴圆角椭圆半径。
  • ry：y轴圆角椭圆半径。
• drawRoundRect(float left, float top, float rigth, float bottom, float rx, float ry, Paint paint)：直接传入矩形的四个点来绘制圆角矩形，从API21开始提供。
  参数同上。
  代码实例（根据以上函数分别绘制圆角矩形）：

mPaint.setColor(Color.RED);
RectF rectF = new RectF(0, 0, 300, 100);
canvas.drawRoundRect(rectF, 30f, 30f, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawRoundRect(400f, 0f, 700f, 100f, 30f, 30f, mPaint);
}

其中，由于直接传入矩形的四个点来绘制圆角矩形的函数是在API21才开始提供，所以进行了判断。
运行结果：

绘制圆形

• drawCircle(float cx,float cy,float radius,Paint paint)：
  
  • cx：圆心点x轴坐标。
  • cy：圆心点y轴坐标。
  • radius：圆的半径。
  • paint：绘制圆形所用画笔。
    代码示例：

mPaint.setColor(Color.RED);
canvas.drawCircle(100f, 50f, 50f, mPaint);

运行结果：

绘制椭圆

• drawOval(RectF oval, Paint paint)：根据矩形对象绘制椭圆。
  
  • oval：矩形对象。椭圆根据该矩形对象生成，以矩形的长作为椭圆的x轴，宽为y轴。
• drawOval(float left, float top, float rigth, float bottom, Paint paint)：直接传入矩形的四个点来绘制椭圆，从API21开始提供。
  参数同上。
  代码示例：

mPaint.setColor(Color.RED);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawOval(rectF, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawOval(300, 0, 450, 100, mPaint);
}

运行结果：

绘制弧形

• drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
  
  • oval：矩形对象。
  • startAngle：弧形开始的角度。
  • sweepAngle：弧形持续的角度。
  • useCenter：是否有弧形的两边。
  • paint：绘制弧形的画笔。
• drawArc(float left, float top, float rigth, float bottom,float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
  参数同上。
  代码实例：

mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawArc(rectF, 0f, 180f, false, mPaint);

RectF rectF2 = new RectF(250, 0, 400, 100);
canvas.drawArc(rectF2, 0f, 180f, true, mPaint);

RectF rectF3 = new RectF(450, 0, 600, 100);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(rectF3, 0f, 180f, true, mPaint);

运行结果：

参考链接

• https://developer.android.com/
• http://blog.csdn.net/harvic880925/article/details/38875149