Android中Canvas的使用（画直线、虚线、圆、圆环、矩形、多边形、圆角矩形、矩形字体居中、图片、图片旋转等）

好久之前就想写博客，分享一些自己的总结体会，可总是因为工作忙+本人懒惰才一直没写。以后准备每月写1~2篇博客吧，希望自己能坚持下去。好了废话不多说直接上canvas绘制效果图及代码。

Canvas与Paint介绍

在Android中把Canvas当做画布、Paint当做画笔，那么就可以在画布上用画笔绘制我们想要的任何东西。我们可以设置一些画布/画笔的属性，比如：画布的颜色、画笔的抗锯齿等。使用Canvas画图，一般绘图都是在自定义view中使用，特别是onDraw(Canvas canvas)方法中，使用参数canvas这个画布进行绘制图型，该方法里面就是绘制图形的过程。如下图所示就是我进行绘制的效果图、在其下有对应源码。
canvas绘制效果图

Canvas绘制文字

drawText(String s, int x, int y, Paint paint)
canvas绘制字体比较简单，直接调用drawText(String s, int x, int y, Paint p)方法，其参数分别是：s->待绘制的文字，x->文字在屏幕上的横坐标，y->文字在屏幕上的纵坐标，paint->绘制文字的画笔。

        // 创建画笔  
        Paint textPaint = new Paint();
        textPaint.setColor(Color.BLACK);//设置黑色
        textPaint.setTextSize(60); //设置字体大小为100像素点
        //画字
        canvas.drawText("画圆(圆环)", 30, 200, textPaint);
        canvas.drawText("画线(虚线)", 30, 400, textPaint);
        canvas.drawText("画圆角矩形(文字居中)", 30, 600, textPaint);
        canvas.drawText("画图片(旋转)", 30, 1000, textPaint);
        canvas.drawText("画椭圆(三角形)", 30, 1350, textPaint);

Canvas绘制圆、圆环

drawCircle(int x, int y, int r, Paint paint)
canvas绘制圆环其原理就是绘制小圆覆盖大圆形成圆环效果，先画大圆在此基础上再画小圆。调用drawCircle(int r, int x, int y, Paint paint)方法来，其参数分别是：x->圆心在屏幕上的横坐标，y->圆心在屏幕上的纵坐标，r->圆的半径，paint->绘制文字的画笔。在这里画笔抗锯齿尤为重要，会使圆环边缘光滑。

        //创建红画笔  
        Paint redPaint = new Paint();  
        redPaint.setColor(Color.RED);// 设置红色
        redPaint.setAntiAlias(true); //抗锯齿
        redPaint.setStrokeWidth(4);  //画笔粗细为4像素点
        //创建黄画笔
        Paint yellowPaint = new Paint();  
        yellowPaint.setColor(Color.YELLOW);// 设置黄色
        yellowPaint.setAntiAlias(true); //抗锯齿
        yellowPaint.setStrokeWidth(4);  //画笔粗细为4像素点
        //画大圆
        canvas.drawCircle(600, 150, 100, redPaint);
        //画小圆
        canvas.drawCircle(600, 150, 80, yellowPaint);
        //...
        canvas.drawCircle(600, 150, 60, redPaint);
        canvas.drawCircle(600, 150, 40, yellowPaint);
        canvas.drawCircle(600, 150, 20, redPaint);

Canvas绘制直线、虚线

drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
drawLine实现线的绘制。startX->起始端点的X坐标，startY->起始端点的Y坐标，stopX->终止端点的X坐标，stopY->终止端点的Y坐标。
drawPath(Path path, Paint paint)
drawPath实现直线、虚线与多边形绘制。
paint.setStyle ( Paint.Style.STROKE ) ; //绘制直线
paint.setPathEffect ( new DashPathEffect ( new float [ ] { 6, 3 }, 0 ) ) ; //设置虚线效果
在设置虚线效果里的float数组的意思是：先画长度为6的实线再间隔长度为3的空白，之后一直重复这个单元。这个数组的长度只要大于等于2就行，你可以设置多个数值，产生不同效果，最后这个0指的是与起始位置的偏移量。

        //创建蓝画笔
        Paint bluePaint = new Paint();
        bluePaint.setStyle(Paint.Style.STROKE);/绘制直线
        bluePaint.setColor(Color.BLUE);
        bluePaint.setStrokeWidth(9); //画笔粗细为9像素点
        //划线
        canvas.drawLine(400, 400, 600, 400, bluePaint);
        //画虚线
        Path path = new Path();     
        path.moveTo(700, 400);
        path.lineTo(900, 400);     
        PathEffect effects = new DashPathEffect(new float[]{16,4},0);
        bluePaint.setPathEffect(effects);
        canvas.drawPath(path, bluePaint);

Canvas绘制矩形、圆角矩形

Rect(int left, int top, int right, int bottom)
Rect是使用int类型作为数值参数，因在android中两点确定一个矩形区域，参数是待绘制矩形区域左上和右下两点的坐标。
RectF(float left, float top, float right, float bottom)
RectF是使用float类型作为数值参数，Rect和RectF绘制矩形精度不一样，其参数也是是待绘制矩形区域左上和右下两点的坐标。
drawRect(RectF rect, Paint paint-)
drawRect实现矩形绘制，rect->RectF对象，paint->画笔。
drawRoundRect (RectF rect, float rx, float ry, Paint paint)
drawRoundRect实现圆角矩形绘制，rect->RectF对象，rx->x方向上的圆角半径，ry->y方向上的圆角半径，paint->画笔。

        //创建绿画笔
        Paint greenPaint = new Paint();  
        greenPaint.setColor(Color.GREEN);
        greenPaint.setAntiAlias(true); //抗锯齿
        //画矩形
        Rect rect = new Rect();
        rect.top = 660;
        rect.bottom = 900; 
        rect.left = 100; 
        rect.right = 500;
        canvas.drawRect(rect, greenPaint);
        //画圆角矩形
        RectF rectF = new RectF();
        rectF.top = 660;
        rectF.bottom = 900; 
        rectF.left = 600; 
        rectF.right = 1000;
        canvas.drawRoundRect(rectF, 50, 40, greenPaint);

Canvas绘制矩形文字居中

矩形内文字居中需要实现水平和垂直方向的居中。设置文字水平居中调用画笔的setTextAlign(Paint.Align.CENTER)即可。设置文字垂直居中则要计算文字左上角Y轴坐标值，参考大牛hursing写的一篇博文可知实现居中文字左上角Y轴坐标：
(rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2
hursing分析实现矩形文字居中链接：http://blog.csdn.net/hursing/article/details/18703599。

        //文字居中
        Paint fondPaint = new Paint();
        fondPaint.setColor(Color.RED);
        fondPaint.setTextSize(60); 
        //设置文字水平居中
        fondPaint.setTextAlign(Paint.Align.CENTER);
        //设置文字垂直居中
        FontMetricsInt fontMetrics = fondPaint.getFontMetricsInt();
        float baseRect = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top)/2;
        float baseRectF = (rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2;
        canvas.drawText("矩形居中", rect.centerX(), baseRect, fondPaint);
        canvas.drawText("圆角~居中", rectF.centerX(), baseRectF, fondPaint);

Canvas绘制图片、图片旋转

drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
drawBitmap实现图片绘制， bitmap->图片资源，left->偏移左边的位置，top-> 偏移顶部的位置，paint->画笔。

      //获取图片
      Bitmap  bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ruler);
      //画图片
      canvas.drawBitmap(bitmap, 200,1050, null);
      //画旋转90图片
      Matrix matrix = new Matrix();
      matrix.postRotate(90);
      // 创建新的图片  
      Bitmap rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0,  
      bitmap.getWidth(), bitmap.getHeight(), matrix, true);
      canvas.drawBitmap(rotatedBitmap, 600, 1050, null);

Canvas绘制多边形

drawOval(RectF oval, Paint paint)
drawOval实现椭圆绘制，oval->RectF对象，是左上和右下两点确定的一块椭圆区域，paint->画笔。
drawPath(Path path, Paint paint)
drawPath实现多边形绘制。path->包含路径信息的Path对象，paint->画笔。
path常用方法：
moveTo(int x, int y)->其参数(x,y)代表起点坐标。
lineTo(int x, int y)->连接上一个点到当前点(x,y)之间的直线。
setLastPoint(int x, int y)->重置最后一个点的位置为(x,y)。
close()->从最后一个点连接最初的一个点，形成一个闭合区域。

         //画椭圆
        RectF oval=new RectF(100,1400,400,1550); 
        canvas.drawOval(oval, yellowPaint); 
        //画三角
        Path path2 = new Path();  
        path2.moveTo(800, 1400);// 此点为多边形的起点  
        path2.lineTo(600, 1550);  
        path2.lineTo(1000, 1550);  
        path2.close(); // 使这些点构成封闭的多边形  
        canvas.drawPath(path2, yellowPaint); 
        //画多边形
        Path path3 = new Path();  
        path3.moveTo(500, 1600);// 此点为多边形的起点  
        path3.lineTo(300, 1700);  
        path3.lineTo(500, 1800); 
        path3.lineTo(700, 1700);  
        path3.close(); // 使这些点构成封闭的多边形  
        canvas.drawPath(path3, yellowPaint);

本文只介绍Canvas绘图的基础使用，请大家多多指教
转载请注明出处：http://blog.csdn.net/allen_6/article/details/78255782