【Android】自定义视图View之---Canvas和Path对象

介绍Android中的Paint和Canvas的概念和使用方法

Android中的Paint和Canvas的概念是很简单的，就是我们用画笔在画布上进行绘制没什么难度的，我们只要拿到画笔Paint和画布Canvas对象就可以进行操作了。当然Canvas对象提供了很多绘制图形的方法，下面来看一下代码吧：

[java] view plaincopy

1. package com.example.drawpathdemo;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.content.Context;  
5. import android.graphics.Bitmap;  
6. import android.graphics.BitmapFactory;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.LinearGradient;  
10. import android.graphics.Paint;  
11. import android.graphics.Path;  
12. import android.graphics.RectF;  
13. import android.graphics.Shader;  
14. import android.util.AttributeSet;  
15. import android.view.View;  
16.   
17. public class DrawView extends View {  
18.   
19.     public DrawView(Context context) {  
20.         super(context);  
21.     }  
22.       
23.     public DrawView(Context context, AttributeSet attributeSet) {    
24.         super(context, attributeSet);    
25.     }  
26.   
27.     @SuppressLint("DrawAllocation")  
28.     @Override  
29.     protected void onDraw(Canvas canvas) {  
30.         super.onDraw(canvas);  
31.         /* 
32.          * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形 
33.          * drawLine 绘制直线 drawPoin 绘制点 
34.          */  
35.         // 创建画笔  
36.         Paint p = new Paint();  
37.         p.setColor(Color.RED);// 设置红色  
38.   
39.         canvas.drawText("画圆：", 10, 20, p);// 画文本  
40.         canvas.drawCircle(60, 20, 10, p);// 小圆  
41.         p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了  
42.         canvas.drawCircle(120, 20, 20, p);// 大圆  
43.   
44.         canvas.drawText("画线及弧线：", 10, 60, p);  
45.         p.setColor(Color.GREEN);// 设置绿色  
46.         canvas.drawLine(60, 40, 100, 40, p);// 画线  
47.         canvas.drawLine(110, 40, 190, 80, p);// 斜线  
48.         //画笑脸弧线  
49.         p.setStyle(Paint.Style.STROKE);//设置空心  
50.         RectF oval1=new RectF(150,20,180,40);  
51.         canvas.drawArc(oval1, 180, 180, false, p);//小弧形  
52.         oval1.set(190, 20, 220, 40);  
53.         canvas.drawArc(oval1, 180, 180, false, p);//小弧形  
54.         oval1.set(160, 30, 210, 60);  
55.         canvas.drawArc(oval1, 0, 180, false, p);//小弧形  
56.   
57.         canvas.drawText("画矩形：", 10, 80, p);  
58.         p.setColor(Color.GRAY);// 设置灰色  
59.         p.setStyle(Paint.Style.FILL);//设置填满  
60.         canvas.drawRect(60, 60, 80, 80, p);// 正方形  
61.         canvas.drawRect(60, 90, 160, 100, p);// 长方形  
62.   
63.         canvas.drawText("画扇形和椭圆:", 10, 120, p);  
64.         /* 设置渐变色 这个正方形的颜色是改变的 */  
65.         Shader mShader = new LinearGradient(0, 0, 100, 100,  
66.                 new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,  
67.                         Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。  
68.         p.setShader(mShader);  
69.         // p.setColor(Color.BLUE);  
70.         RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形，扫描测量  
71.         canvas.drawArc(oval2, 200, 130, true, p);  
72.         // 画弧，第一个参数是RectF：该类是第二个参数是角度的开始，第三个参数是多少度，第四个参数是真的时候画扇形，是假的时候画弧线  
73.         //画椭圆，把oval改一下  
74.         oval2.set(210,100,250,130);  
75.         canvas.drawOval(oval2, p);  
76.   
77.         canvas.drawText("画三角形：", 10, 200, p);  
78.         // 绘制这个三角形,你可以绘制任意多边形  
79.         Path path = new Path();  
80.         path.moveTo(80, 200);// 此点为多边形的起点  
81.         path.lineTo(120, 250);  
82.         path.lineTo(80, 250);  
83.         path.close(); // 使这些点构成封闭的多边形  
84.         canvas.drawPath(path, p);  
85.   
86.         // 你可以绘制很多任意多边形，比如下面画六连形  
87.         p.reset();//重置  
88.         p.setColor(Color.LTGRAY);  
89.         p.setStyle(Paint.Style.STROKE);//设置空心  
90.         Path path1=new Path();  
91.         path1.moveTo(180, 200);  
92.         path1.lineTo(200, 200);  
93.         path1.lineTo(210, 210);  
94.         path1.lineTo(200, 220);  
95.         path1.lineTo(180, 220);  
96.         path1.lineTo(170, 210);  
97.         path1.close();//封闭  
98.         canvas.drawPath(path1, p);  
99.         /* 
100.          * Path类封装复合(多轮廓几何图形的路径 
101.          * 由直线段*、二次曲线,和三次方曲线，也可画以油画。drawPath(路径、油漆),要么已填充的或抚摸 
102.          * (基于油漆的风格),或者可以用于剪断或画画的文本在路径。 
103.          */  
104.           
105.         //画圆角矩形  
106.         p.setStyle(Paint.Style.FILL);//充满  
107.         p.setColor(Color.LTGRAY);  
108.         p.setAntiAlias(true);// 设置画笔的锯齿效果  
109.         canvas.drawText("画圆角矩形:", 10, 260, p);  
110.         RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形  
111.         canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径  
112.           
113.         //画贝塞尔曲线  
114.         canvas.drawText("画贝塞尔曲线:", 10, 310, p);  
115.         p.reset();  
116.         p.setStyle(Paint.Style.STROKE);  
117.         p.setColor(Color.GREEN);  
118.         Path path2=new Path();  
119.         path2.moveTo(100, 320);//设置Path的起点  
120.         path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标  
121.         canvas.drawPath(path2, p);//画出贝塞尔曲线  
122.           
123.         //画点  
124.         p.setStyle(Paint.Style.FILL);  
125.         canvas.drawText("画点：", 10, 390, p);  
126.         canvas.drawPoint(60, 390, p);//画一个点  
127.         canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点  
128.           
129.         //画图片，就是贴图  
130.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
131.         canvas.drawBitmap(bitmap, 250,360, p);  
132.     }  
133. }  

运行一下看效果图：

1、Path对象

在代码中我们看到了我们新建了一个Paint画笔对象，对于画笔对象，它有很多设置属性的：

void  setARGB(int a, int r, int g, int b)  设置Paint对象颜色，参数一为alpha透明通道

void  setAlpha(int a)  设置alpha不透明度，范围为0~255

void  setAntiAlias(boolean aa)  //是否抗锯齿，默认值是false

void  setColor(int color)  //设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义

void  setFakeBoldText(boolean fakeBoldText)  //设置伪粗体文本

void  setLinearText(boolean linearText)  //设置线性文本

PathEffect  setPathEffect(PathEffect effect)  //设置路径效果

Rasterizer  setRasterizer(Rasterizer rasterizer) //设置光栅化

Shader  setShader(Shader shader)  //设置阴影 ,我们在后面会详细说一下Shader对象的

void  setTextAlign(Paint.Align align)  //设置文本对齐

void  setTextScaleX(float scaleX)  //设置文本缩放倍数，1.0f为原始

void  setTextSize(float textSize)  //设置字体大小

Typeface  setTypeface(Typeface typeface)  //设置字体，Typeface包含了字体的类型，粗细，还有倾斜、颜色等

注：

Paint mp = new paint();
mp.setTypeface(Typeface.DEFAULT_BOLD)

常用的字体类型名称还有：
Typeface.DEFAULT //常规字体类型
Typeface.DEFAULT_BOLD //黑体字体类型
Typeface.MONOSPACE //等宽字体类型
Typeface.SANS_SERIF //sans serif字体类型
Typeface.SERIF //serif字体类型

除了字体类型设置之外，还可以为字体类型设置字体风格，如设置粗体：
Paint mp = new Paint();
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );

常用的字体风格名称还有：
Typeface.BOLD //粗体
Typeface.BOLD_ITALIC //粗斜体
Typeface.ITALIC //斜体
Typeface.NORMAL //常规

void  setUnderlineText(boolean underlineText)  //设置下划线

void  setStyle(Style style) //设置画笔样式

注：

常用的样式

Paint.Style.FILL
Paint.Style.STROKE
Paint.Style.FILL_AND_STROKE

这里的FILL和STROKE两种方式用的最多，他们的区别也很好理解的，FILL就是填充的意思，STROKE就是空心的意思，只有图形的轮廓形状，内部是空的。

void setStrokeWidth(float width) //在画笔的样式为STROKE的时候，图形的轮廓宽度

2、Canvas对象

对于画布对象Canvas我们是从onDraw方法中获取到的，所以这里我们就可以看不来了，我们在自定义视图的时候都会继承View类，然后在他的onDraw方法中拿到Canvas对象，进行各种绘制了。下面就来一一看一下各种绘制的方法吧：

首先来看一下如何创建一个画笔对象：

[java] view plaincopy

1. Paint p = new Paint();  
2. p.setColor(Color.RED);// 设置红色  

我们可以设置画笔的颜色，当然还有其他的方法，我们可以设置画笔的粗细，是否有锯齿等，后面会说道。

1）、画圆(drawCircle)

我们想一下，如果画出一个圆形的话需要哪些要素，学过几何的同学都知道：圆形坐标+半径 就可以确定一个圆形了

[java] view plaincopy

1. canvas.drawCircle(120, 20, 20, p);  

参数一：圆心的x坐标

参数二：圆心的y坐标

参数三：圆的半径

参数四：画笔对象

还有一个这里我们设置了画笔是否有锯齿：

[java] view plaincopy

1. p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了  

关于这个锯齿，其实很好理解，就是如果没有锯齿效果，那么画出来的圆形就很光滑，有锯齿看上去的圆形很粗糙的。但是默认情况下，画笔是有锯齿的。之所以这样，是因为在没有锯齿效果的情况下，绘制图形效率会比有锯齿效果低，所以系统考虑了效率问题，就把默认值设置成有锯齿了，我们在实际绘图过程中需要衡量一下的。

2）、画直线(drawLine)

我们想一下，如果画出一个直线的话需要哪些要素，起始点坐标+终点坐标 就可以确定一条直线了

[java] view plaincopy

1. canvas.drawLine(60, 40, 100, 40, p);// 画线  

参数一：起始点的x坐标

参数二：起始点的y坐标

参数三：终点的x坐标

参数四：终点的y坐标

参数五：画笔对象

3）、画椭圆(drawOval)

我们想一下，如果画出椭圆的话需要哪些要素，长轴+短轴的长度

[java] view plaincopy

1. RectF oval1=new RectF(150,20,180,40);  
2. canvas.drawOval(oval2, p);  

参数一：椭圆的外接矩形

参数二：画笔对象

这里先来说一下RectF的相关知识吧：在绘图中这个对象是十分重要的，它表示的是一个矩形，它有四个参数：

left,top,right,bottom

这四个值是相对于设备屏幕的起始点开始的。

[java] view plaincopy

1. RectF oval1=new RectF(150,20,180,40);  

比如上面的这个矩形，说白了就是这样：

矩形的左上角的坐标是：(150,20)

矩形的右下角的坐标是：(180,30)

那么我们就知道这个矩形的宽是：180-150=30；高是：40-20=20

其实还有与RectF对象对应的还有一个对象：Rect,它也是四个参数，和RectF唯一的区别就是，Rect中的参数是float类型的，RectF中的参数是int类型的

那么一个矩形就可以确定一个椭圆的，这个矩形就是和这个椭圆外接：

那么椭圆的长轴就是矩形的宽，短轴就是矩形的高

这样就可以确定一个椭圆了，那么如果我们想画一个圆形的话用这种方式也是可以的，只要把RectF设置成正方形就可以了。

4）、画弧线/画扇形(drawArc)

我们想一下，如果画出一个弧线的话需要哪些要素，起始的弧度+弧线的弧度+外围的矩形大小

这个和上面画椭圆很相似的，就相当于在他的基础上多了其实弧度+弧线的弧度

[java] view plaincopy

1. p.setStyle(Paint.Style.STROKE);//设置空心  
2. RectF oval1=new RectF(150,20,180,40);  
3. canvas.drawArc(oval1, 180, 180, false, p);//小弧形  

参数一：外接弧形的矩形

参数二：弧线开始的弧度

参数三：弧线的弧度

参数四：是一个boolean类型的参数：true的时候画扇形，是false的时候画弧线

参数五：画笔对象

5）、画矩形(drawRect)

[java] view plaincopy

1. RectF oval1=new RectF(150,20,180,40);  
2. canvas.drawRect(oval1, p);  

参数一：矩形对象

参数二：画笔对象

6）、画圆角矩形(drawRoundRect)

[java] view plaincopy

1. RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形  
2. canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径  

参数一：矩形大小

参数二：圆角的x半径(椭圆的长轴的一半)

参数三：圆角的y半径(椭圆的短轴的一半)

参数四：画笔对象

其实这个和正常的矩形不一样的是：在四个角是有弧度的，那么弧度的话，就会想到椭圆了，我们在上面说道椭圆的几个要素：长轴和短轴，那么这里就是取长轴的一半和短轴的一半。

7）、画三角形/多边形(drawPath)

我们想一下，如果绘制三角形/多边形的话需要哪些要素，能确定多边形的形状最重要的因素就是角，那么这些角就是一个坐标

[java] view plaincopy

1. Path path = new Path();  
2. path.moveTo(80, 200);// 此点为多边形的起点  
3. path.lineTo(120, 250);  
4. path.lineTo(80, 250);  
5. path.close(); // 使这些点构成封闭的多边形  
6. canvas.drawPath(path, p);  

这里需要介绍一下Path对象了，这个对象见名知意，是路径的意思，它有两个参数：

参数一：x坐标

参数二：y坐标

路径是多个点相连接的。所以Path提供了两个方法：moveTo和lineTo

moveTo方法的作用是设置我们绘制路径的开始点，如果没有这个方法的调用的话，系统默认的开始点是(0,0)点

lineTo方法就是将路径的上一个坐标点和当前坐标点进行连接，或者可以认为设置多边形的每个角的坐标点

那么对于三角形的话，我们需要三个点即可。

这个画三角形其实我们用上面的画直线的方法也可以实现的，反过来也是，我们用Path对象也是可以画出一条直线的，那么他们的本质区别是：

绘制路径方式的焦点是角(坐标点)

绘制直线的方式的焦点是边(长度)

8）、画点(drawPoint)

[java] view plaincopy

1. canvas.drawPoint(60, 390, p);//画一个点  
2. canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点  

这里有两个方法：

drawPoint

参数一：点的x坐标

参数二：点的y坐标

参数三：画笔对象

drawPoints

参数一：多个点的数组

参数二：画笔对象

9）、画贝塞尔曲线(drawPath)

这种曲线其实我们在开发过程中很少用到，不过在图形学中绘制贝塞尔曲线的时候，我们需要的要素是：起始点+控制点+终点

[java] view plaincopy

1. Path path2=new Path();  
2. path2.moveTo(100, 320);//设置Path的起点  
3. path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标  
4. canvas.drawPath(path2, p);//画出贝塞尔曲线  

它也是使用Path对象的。不过用的是quadTo方法

参数一：控制点的x坐标

参数二：控制点的y坐标

参数三：终点的x坐标

参数四：终点的y坐标

这里需要注意的是，调用moveTo方法来确定开始坐标的，如果没有调用这个方法，那么起始点坐标默认是：(0,0)

10）、绘制图片(drawBitmap)

[java] view plaincopy

1. //画图片，就是贴图  
2. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
3. canvas.drawBitmap(bitmap, 250,360, p);  

参数一：图片对象Bitmap

参数二：图片相对于设备屏幕的left值

参数二：图片相对于设备屏幕的top值

其实我们可以把图片认为是一个矩形，因为图片本身是有长度和宽度的，所以这里只需要矩形的左上角的坐标点，就可以确定这张图片在屏幕中的位置了。

上面就介绍完了Path对象和Canvas对象，他们两个对象是我们自定义视图的基础，所以这部分内容一定要掌握，当然这两个对象没什么难度的，只要对几何图形有点了解的同学，这些东东是很简单的。

转：http://blog.csdn.net/jiangwei0910410003/article/details/42642611