自定义View

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1、首先说一下canvas类：

Class Overview

TheCanvas class holds the "draw" calls. To draw something, you need 4basic 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理解成系统提供给我们的一块内存区域(但实际上它只是一套画图的API，真正的内存是下面的Bitmap)，而且它还提供了一整套对这个内存区域进行操作的方法，所有的这些操作都是画图API。也就是说在这种方式下我们已经能一笔一划或者使用Graphic来画我们所需要的东西了，要画什么要显示什么都由我们自己控制。

这种方式根据环境还分为两种：一种就是使用普通View的canvas画图，还有一种就是使用专门的SurfaceView的canvas来画图。两种的主要是区别就是可以在SurfaceView中定义一个专门的线程来完成画图工作，应用程序不需要等待View的刷图，提高性能。前面一种适合处理量比较小，帧率比较小的动画，比如说象棋游戏之类的；而后一种主要用在游戏，高品质动画方面的画图。

下面是Canvas类常用的方法：

drawRect(RectFrect, Paint paint) //绘制区域，参数一为RectF一个区域 

drawPath(Pathpath, Paint paint) //绘制一个路径，参数一为Path路径对象

drawBitmap(Bitmapbitmap, Rect src, Rect dst, Paint paint)  //贴图，参数一就是我们常规的Bitmap对象，参数二是源区域(这里是bitmap)，参数三是目标区域(应该在canvas的位置和大小)，参数四是Paint画刷对象，因为用到了缩放和拉伸的可能，当原始Rect不等于目标Rect时性能将会有大幅损失。

drawLine(floatstartX, float startY, float stopX, float stopY, Paintpaint) //画线，参数一起始点的x轴位置，参数二起始点的y轴位置，参数三终点的x轴水平位置，参数四y轴垂直位置，最后一个参数为Paint画刷对象。

drawPoint(floatx, float y, Paint paint) //画点，参数一水平x轴，参数二垂直y轴，第三个参数为Paint对象。

drawText(Stringtext, float x, floaty, Paint paint)  //渲染文本，Canvas类除了上面的还可以描绘文字，参数一是String类型的文本，参数二x轴，参数三y轴，参数四是Paint对象。

drawOval(RectF oval, Paint paint)//画椭圆，参数一是扫描区域，参数二为paint对象；

drawCircle(floatcx, float cy, float radius,Paint paint)//绘制圆，参数一是中心点的x轴，参数二是中心点的y轴，参数三是半径，参数四是paint对象；

drawArc(RectF oval,float startAngle, float sweepAngle, boolean useCenter, Paint paint)//画弧，

参数一是RectF对象，一个矩形区域椭圆形的界限用于定义在形状、大小、电弧，参数二是起始角(度)在电弧的开始，

参数三扫描角(度)开始顺时针测量的，参数四是如果这是真的话,包括椭圆中心的电弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象；

还要理解一个paint类：

Class Overview

ThePaint class holds the style and color information about how to draw geometries,text and bitmaps. 

paint类拥有风格和颜色信息如何绘制几何学,文本和位图。

Paint代表了Canvas上的画笔、画刷、颜料等等；

Paint类常用方法:

setARGB(inta, int r, int g, int b) //设置Paint对象颜色，参数一为alpha透明值

setAlpha(inta) //设置alpha不透明度，范围为0~255

setAntiAlias(booleanaa) //是否抗锯齿

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

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

setTextSize(floattextSize)  //设置字体大小

setUnderlineText(booleanunderlineText) //设置下划线

2、直接看案例

看一下效果图：

在此案例中我们用到的是自定义view类;

CustomActivity.java

[java] view plaincopy

1. public class CustomActivity extends Activity {  

2.     @Override  

3.     public void onCreate(Bundle savedInstanceState) {  

4.         super.onCreate(savedInstanceState);  

5.         setContentView(R.layout.main);  

6.         init();  

7.     }  

8.   

9.     private void init() {  

10.        LinearLayout layout=(LinearLayout) findViewById(R.id.root);  

11.        final DrawView view=new DrawView(this);

12.        view.setMinimumHeight(500);  

13.        view.setMinimumWidth(300);  

14.        //通知view组件重绘    

15.        view.invalidate();  

16.        layout.addView(view);  

17.          

18.    }  

19.}  

重要的类:自定义View组件要重写View组件的onDraw(Canvase)方法，接下来是在该 Canvas上绘制大量的几何图形，点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形，等各种形状！

DrawView.java

[java] view plaincopy

1. public class DrawView extends View {  

2.   

3.     public DrawView(Context context) {  

4.         super(context);  

5.     }  

6.   

7.     @Override  

8.     protected void onDraw(Canvas canvas) {  

9.         super.onDraw(canvas);  

10.        /* 

11.         * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形 

12.         * drawLine 绘制直线 drawPoin 绘制点 

13.         */  

14.        // 创建画笔  

15.        Paint p = new Paint();  

16.        p.setColor(Color.RED);// 设置红色  

17.  

18.        canvas.drawText("画圆：", 10, 20, p);// 画文本  

19.        canvas.drawCircle(60, 20, 10, p);// 小圆  

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

21.        canvas.drawCircle(120, 20, 20, p);// 大圆  

22.  

23.        canvas.drawText("画线及弧线：", 10, 60, p);  

24.        p.setColor(Color.GREEN);// 设置绿色  

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

26.        canvas.drawLine(110, 40, 190, 80, p);// 斜线  

27.        //画笑脸弧线  

28.        p.setStyle(Paint.Style.STROKE);//设置空心  

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

30.        canvas.drawArc(oval1, 180, 180, false, p);//小弧形  

31.        oval1.set(190, 20, 220, 40);  

32.        canvas.drawArc(oval1, 180, 180, false, p);//小弧形  

33.        oval1.set(160, 30, 210, 60);  

34.        canvas.drawArc(oval1, 0, 180, false, p);//小弧形  

35.  

36.        canvas.drawText("画矩形：", 10, 80, p);  

37.        p.setColor(Color.GRAY);// 设置灰色  

38.        p.setStyle(Paint.Style.FILL);//设置填满  

39.        canvas.drawRect(60, 60, 80, 80, p);// 正方形  

40.        canvas.drawRect(60, 90, 160, 100, p);// 长方形  

41.  

42.        canvas.drawText("画扇形和椭圆:", 10, 120, p);  

43.        /* 设置渐变色 这个正方形的颜色是改变的 */  

44.        Shader mShader = new LinearGradient(0, 0, 100, 100,  

45.                new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,  

46.                        Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。  

47.        p.setShader(mShader);  

48.        // p.setColor(Color.BLUE);  

49.        RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形，扫描测量  

50.        canvas.drawArc(oval2, 200, 130, true, p);  

51.        // 画弧，第一个参数是RectF：该类是第二个参数是角度的开始，第三个参数是多少度，第四个参数是真的时候画扇形，是假的时候画弧线  

52.        //画椭圆，把oval改一下  

53.        oval2.set(210,100,250,130);  

54.        canvas.drawOval(oval2, p);  

55.  

56.        canvas.drawText("画三角形：", 10, 200, p);  

57.        // 绘制这个三角形,你可以绘制任意多边形  

58.        Path path = new Path();  

59.        path.moveTo(80, 200);// 此点为多边形的起点  

60.        path.lineTo(120, 250);  

61.        path.lineTo(80, 250);  

62.        path.close(); // 使这些点构成封闭的多边形  

63.        canvas.drawPath(path, p);  

64.  

65.        // 你可以绘制很多任意多边形，比如下面画六连形  

66.        p.reset();//重置  

67.        p.setColor(Color.LTGRAY);  

68.        p.setStyle(Paint.Style.STROKE);//设置空心  

69.        Path path1=new Path();  

70.        path1.moveTo(180, 200);  

71.        path1.lineTo(200, 200);  

72.        path1.lineTo(210, 210);  

73.        path1.lineTo(200, 220);  

74.        path1.lineTo(180, 220);  

75.        path1.lineTo(170, 210);  

76.        path1.close();//封闭  

77.        canvas.drawPath(path1, p);  

78.        /* 

79.         * Path类封装复合(多轮廓几何图形的路径 

80.         * 由直线段*、二次曲线,和三次方曲线，也可画以油画。drawPath(路径、油漆),要么已填充的或抚摸 

81.         * (基于油漆的风格),或者可以用于剪断或画画的文本在路径。 

82.         */  

83.          

84.        //画圆角矩形  

85.        p.setStyle(Paint.Style.FILL);//充满  

86.        p.setColor(Color.LTGRAY);  

87.        p.setAntiAlias(true);// 设置画笔的锯齿效果  

88.        canvas.drawText("画圆角矩形:", 10, 260, p);  

89.        RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形  

90.        canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径  

91.          

92.        //画贝塞尔曲线  

93.        canvas.drawText("画贝塞尔曲线:", 10, 310, p);  

94.        p.reset();  

95.        p.setStyle(Paint.Style.STROKE);  

96.        p.setColor(Color.GREEN);  

97.        Path path2=new Path();  

98.        path2.moveTo(100, 320);//设置Path的起点  

99.        path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标  

100.        canvas.drawPath(path2, p);//画出贝塞尔曲线  

101.          

102.        //画点  

103.        p.setStyle(Paint.Style.FILL);  

104.        canvas.drawText("画点：", 10, 390, p);  

105.        canvas.drawPoint(60, 390, p);//画一个点  

106.        canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点  

107.          

108.        //画图片，就是贴图  

109.        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  

110.        canvas.drawBitmap(bitmap, 250,360, p);  

111.    }  

112.}  

 

一、Canvas类android.graphics.Canvas 

Canvas类好比手机中的画纸，我们可以在Canvas上画图形或者图像。一般我们用android来绘画的时候，需要四个组成部分： 
1、位图：包含像素 
2、Canvas画板：包含绘画内容，写入位图 
3、初始图形：如Rect、Bitmap、text等 
4、Paint：用来描述上面初始图形的颜色和类型等 
Canvas类提供了三个构造方法： 
Public Canvas（）；构造一个默认无参的Canvas对象 
Public Canvas（Bitmap bitmap）；根据一个Bitmap构造一个Canvas对象 
Public Canvas（GL gl）；根据一个GL来构造一个对象 
下面我们来了解一下Canvas类提供的方法： 
在Canvas类提供的方法中比较多经常用的是以draw开头的方法，draw开头的方法很容易理解就是向画板中画图形，比如可以向Canvas中画位图，给图形填充颜色等。 

二、Paint类android.graphics.Paint 

Paint类包含有用来画几何图形、文本、位图的类型和颜色等信息，如果把Canvas类看作是画板，那我们可以把Paint类看做是画笔，可以根据需要画出不同颜色和样式的图形、文本等内容。 
Paint类有三个构造方法： 
Public Paint()构造一个缺省的Paint对象 
Public 
Paint(int flags);根据指定的flags来构造一个Paint对象，创建之后可以用 
setFlags（）方法来更改 
Public Paint(Paint paint)根据指定的paint对象来构造一个Paint对象 
Paint类提供了很多方法来设置和获取Paint对象的属性，比如： 
public int getColor ()获得Paint对象的颜色值 
public ColorFilter getColorFilter ()获得颜色过滤器 
public float getTextSize ()获得字体大小数值 
public void setStyle (Paint.Style style)设置paint的类型 

三  Color类android.graphics.Color 

此类 定义了一些方法来创建和转换颜色值。颜色被表示为封装的数值，这个数值由四个字节组成，分别是：alpha、red、green、blue，这些值是非自 左乘的，也就是说任何透明性只存储在alpha部分，而不是在颜色组成部分。每一部分按照如下的顺序保存：（alpha<<24）| (red<<16)|<green<<8)|blue.每一部分的取值范围在0-255之间，0意味着这部分不起作 用，255表示100%的起作用。因此不透明的黑色应该是0xFF000000,不透明的白色应该是0xFFFFFFFF 。 
Color类提供了12个常量值来代表不同的颜色值，我们在开发工程中可以直接调用这些常量值来设置我们所要修饰的文本、图形等对象。 
Color类提供了一个无参的构造方法Color() 
Color类提供了一些方法来进行颜色值的创建和转换如下： 
其中三个方法是用来返回一个颜色常量值的红绿蓝分色，数值分别在0-255之间，如下： 
Public static red(int color); 
Public static green(int color); 
Public static blue(int color); 
其中Publicstatic int rgb(int red,int green,int blue);输入红绿蓝三色，返回一个RGB颜色值。 
下面几个方法大家可以参考Android API来了解： 
Public static int HSVToColor(int alpha,float[] hsv); 
Public static int HSVToColor(float[] hsv); 
Public static void RGBToHSV(int red,int green,int blue,float[] hsv); 
Public static int alpha(int color); 
Public static int argb(int alpha,int red,int green,int blue); 
Public static colorToHSV(int color,float[] hsv); 
Public static parseColor(String colorString); 

四．Typeface类android.graphics.Typeface 

Typeface类定义字体和字体内在的类型。这个类被用在画笔Paint设置的时候，比如用textSize,textSkewX和textScale设置来指定text在画的时候如何来显示和测量。 

Typeface 提供了一些常量值来表示自身的一些属性，比如BOLD，BOLD_ITALIC，ITALIC等，开发者可以用 defaultFrOPhone SDNtyle(int style)获得内在的Typeface对象。读者可以参考详细的API文档再这里就不再赘述了。 

下面我们来看一下Typeface的主要方法。 

Typeface类没有构造方法，通常如果一个类没有构造函数就无法通过构造来生成一个对象实体，此时一般会有特定的静态方法来取得这个类的实体。Typeface就提供了四个静态方法间接来得到Typeface实体分别如下： 

Public static Typeface create（Typeface family，int style）； 

此方法返回一个与已经存在的Typeface字形体系相匹配且类型是指定类型的Typeface。如果你想得到一个与已经存在的Typeface字形体系 相类似，但是样式不一样的Typeface时可以调用此方法。其中family参数可以为null，如果为空则表示从默认的Typeface字形体系中选 择。 

Public static Typefaxecreate(String familyname,int style); 

此方法通过给定的字形体系的名称familyname和指定的类型返回一个Typeface对象。如果给定字形体系的名称为null，我们可以通过getStyle（）方法来获得返回Typeface对象的真正的属性。 

Public static TypefacecreateFromAsset(AssetManager mgr,String path); 

此方法通过规定的字体数据来返回一个Typeface对象。第一个参数为资源管理器，第二个参数是指定字体类型。 

Public static Typeface defaultFrOPhoneSDNtyle(int style);此方法返回一个指定类型的Typeface对象 

Typeface还提供了另外三个方法： 

Public int getStyle();此方法返回Typeface内在的类型属性 

Public final BooleanisBold();如果getStyle（）有BOLD位组将返回true 

Public final BooleanisItalic();如果getStyle（）有ITALIC位组将返回true 

五、Path类android.graphics.Path 

Path类（一组区域）的描画，类囊括多种几何图形比如直线线段、二次曲线、三次曲线等， 

调用Canvas.drawPath()方法可以将Path以所定义的paint的方式来画到画板上或者填出图形，也可以用paint所指定方式来画图形。 

六、RectF类android.graphics.RectF和Rect类android.graphics.Rect 

RectF 这个类包含一个矩形的四个单精度浮点坐标。矩形通过上下左右4个边的坐标来表示一个矩形。这些坐标值属性可以被直接访问，用width（）和 height（）方法可以获取矩形的宽和高。注意：大多数方法不会检查这些坐标分类是否错误（也就是left<=right和top& lt;=bottom）. 

RectF一共有四个构造方法： 

RectF（）构造一个无参的矩形 

RectF（float left,floattop,float right,float bottom）构造一个指定了4个参数的矩形 

RectF(Rect F r)根据指定的RectF对象来构造一个RectF对象(对象的左边坐标不变) 

RectF(Rect r)根据给定的Rect对象来构造一个RectF对象 

RectF提供了很多方法，下面介绍几个方法： 

Public Boolean contain(RectFr);判断一个矩形是否在此矩形内，如果在这个矩形内或者和这个矩形等价则返回true，同样类似的方法还有public Boolean contain(floatleft,float top,float right,float bottom)和public Booleancontain(float x,float y)。 

Public void union(floatx,float y)更新这个矩形，使它包含矩形自己和（x，y）这个点。 

RectF类提供的方法都比较简单，容易理解，再此就不再一一赘述 

Android.graphics.Rect类，这个类同android.graphics.RectF很相似，不同的地方是Rect类的坐标是用整形表示的，而RectF的坐标是用单精度浮点型表示的。这里大家一定要注意啊。 

七、Point类android.graphics.Point 

   这个类从字面意思就可以看出它跟点有关系，是点的一个对象类。 

这个类有两个属性，分别是：X坐标和y坐标。 

构造函数有三个：Point（），Point（int x，int y），Point（Point p） 

主要方法有： 

Public void set（x，y）；重新设定一下x，y的坐标 

Public final void offset(intdx,int dy);给坐标一个补偿值，值可以使正的也可以是负的。 

Public final void negate();否定坐标值。 

Point类和android.graphics.PointF类似，不同点是前者坐标值的类型是int型，而后者的坐标值是float型。除此之外PointF类多加了几个方法，比如： 

Public final float length();返回（0，0）点到该点的距离。 

Public static floatlength(float x,float y);返回（0，0）点到（x，y）点的距离。

参数

left

FLOAT

矩形左下点的 x坐标。默认值为 0.f。

top

FLOAT

矩形左下角的 y坐标。默认值为 0.f。

right

FLOAT

矩形右下点的 x坐标。默认值为 0.f。

bottom

FLOAT

矩形右上角 y坐标。默认值为 0.f。