Android中Canvas绘图基础详解（附源码下载） Android开发中文站(3)_H5之家

下面对以上代码进行说明：

其方法签名是drawCircle (float cx, float cy, float radius, Paint paint)，在使用时需要传入圆心的坐标以及半径，当然还有画笔Paint对象。

当我们在调用drawCircle、drawOval、drawArc、drawRect等方法时，我们既可以绘制对应图形的填充面，也可以只绘制该图形的轮廓线，控制的关键在于画笔Paint中的style。Paint通过setStyle方法设置要绘制的类型，style有取三种值：Paint.Style.FILL、Paint.Style.STROKE和Paint.Style.FILL_AND_STROKE。

drawOval

Canvas中提供了drawOval方法绘制椭圆，其使用代码如下所示：

private void drawOval(Canvas canvas){ int canvasWidth = canvas.getWidth(); int canvasHeight = canvas.getHeight(); float quarter = canvasHeight / 4; float left = 10 * density; float top = 0; float right = canvasWidth - left; float bottom= quarter; RectF rectF = new RectF(left, top, right, bottom); //绘制椭圆形轮廓线 paint.setStyle(Paint.Style.STROKE);//设置画笔为画线条模式 paint.setStrokeWidth(2 * density);//设置线宽 paint.setColor(0xff8bc5ba);//设置线条颜色 canvas.translate(0, quarter / 4); canvas.drawOval(rectF, paint); //绘制椭圆形填充面 paint.setStyle(Paint.Style.FILL);//设置画笔为填充模式 canvas.translate(0, (quarter + quarter / 4)); canvas.drawOval(rectF, paint); //画两个椭圆，形成轮廓线和填充色不同的效果 canvas.translate(0, (quarter + quarter / 4)); //1. 首先绘制填充色 paint.setStyle(Paint.Style.FILL);//设置画笔为填充模式 canvas.drawOval(rectF, paint);//绘制椭圆形的填充效果 //2. 将线条颜色设置为蓝色，绘制轮廓线 paint.setStyle(Paint.Style.STROKE);//设置画笔为线条模式 paint.setColor(0xff0000ff);//设置填充色为蓝色 canvas.drawOval(rectF, paint);//设置椭圆的轮廓线 }

其界面如下所示：

这里写图片描述

下面对以上代码进行说明：

其方法签名是public void drawOval (RectF oval, Paint paint),RectF有四个字段，分别是left、top、right、bottom，
这四个值对应了椭圆的左、上、右、下四个点到相应坐标轴的距离，具体来说，left和right表示椭圆的最左侧的点和最右侧的点到绘图坐标系的y轴的距离，top和bottom表示椭圆的最顶部的点和最底部的点到绘图坐标系的x轴的距离，这四个值就决定了椭圆的形状，right与left的差值即为椭圆的长轴，bottom与top的差值即为椭圆的短轴，如下图所示：

这里写图片描述

drawArc

Canvas中提供了drawArc方法用于绘制弧，这里的弧指两种：弧面和弧线，弧面即用弧围成的填充面，弧线即为弧面的轮廓线。其使用代码如下所示：

private void drawArc(Canvas canvas){ int canvasWidth = canvas.getWidth(); int canvasHeight = canvas.getHeight(); int count = 5; float ovalHeight = canvasHeight / (count + 1); float left = 10 * density; float top = 0; float right = canvasWidth - left; float bottom= ovalHeight; RectF rectF = new RectF(left, top, right, bottom); paint.setStrokeWidth(2 * density);//设置线宽 paint.setColor(0xff8bc5ba);//设置颜色 paint.setStyle(Paint.Style.FILL);//默认设置画笔为填充模式 //绘制用drawArc绘制完整的椭圆 canvas.translate(0, ovalHeight / count); canvas.drawArc(rectF, 0, 360, true, paint); //绘制椭圆的四分之一,起点是钟表的3点位置，从3点绘制到6点的位置 canvas.translate(0, (ovalHeight + ovalHeight / count)); canvas.drawArc(rectF, 0, 90, true, paint); //绘制椭圆的四分之一,将useCenter设置为false canvas.translate(0, (ovalHeight + ovalHeight / count)); canvas.drawArc(rectF, 0, 90, false, paint); //绘制椭圆的四分之一，只绘制轮廓线 paint.setStyle(Paint.Style.STROKE);//设置画笔为线条模式 canvas.translate(0, (ovalHeight + ovalHeight / count)); canvas.drawArc(rectF, 0, 90, true, paint); //绘制带有轮廓线的椭圆的四分之一 //1. 先绘制椭圆的填充部分 paint.setStyle(Paint.Style.FILL);//设置画笔为填充模式 canvas.translate(0, (ovalHeight + ovalHeight / count)); canvas.drawArc(rectF, 0, 90, true, paint); //2. 再绘制椭圆的轮廓线部分 paint.setStyle(Paint.Style.STROKE);//设置画笔为线条模式 paint.setColor(0xff0000ff);//设置轮廓线条为蓝色 canvas.drawArc(rectF, 0, 90, true, paint); }

界面如下所示：

这里写图片描述

下面对以上代码进行说明：

用drawArc画的弧指的是椭圆弧，即椭圆的一部分。当然，如果椭圆的长轴和和短轴相等，这时候我们就可以用drawArc方法绘制圆弧。其方法签名是：public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

drawPath

Canvas通过drawPath方法可以绘制Path。那Path是什么呢？Path致以过来是路径的意思，在Android中，Path是一种线条的组合图形，其可以由直线、二次曲线、三次曲线、椭圆的弧等组成。Path既可以画线条，也可以画填充面。其使用代码如下所示：

private void drawPath(Canvas canvas){ int canvasWidth = canvas.getWidth(); int deltaX = canvasWidth / 4; int deltaY = (int)(deltaX * 0.75); paint.setColor(0xff8bc5ba);//设置画笔颜色 paint.setStrokeWidth(4);//设置线宽 /*--------------------------用Path画填充面-----------------------------*/ paint.setStyle(Paint.Style.FILL);//设置画笔为填充模式 Path path = new Path(); //向Path中加入Arc RectF arcRecF = new RectF(0, 0, deltaX, deltaY); path.addArc(arcRecF, 0, 135); //向Path中加入Oval RectF ovalRecF = new RectF(deltaX, 0, deltaX * 2, deltaY); path.addOval(ovalRecF, Path.Direction.CCW); //向Path中添加Circle path.addCircle((float)(deltaX * 2.5), deltaY / 2, deltaY / 2, Path.Direction.CCW); //向Path中添加Rect RectF rectF = new RectF(deltaX * 3, 0, deltaX * 4, deltaY); path.addRect(rectF, Path.Direction.CCW); canvas.drawPath(path, paint); /*--------------------------用Path画线--------------------------------*/ paint.setStyle(Paint.Style.STROKE);//设置画笔为线条模式 canvas.translate(0, deltaY * 2); Path path2 = path; canvas.drawPath(path2, paint); /*-----------------使用lineTo、arcTo、quadTo、cubicTo画线--------------*/ paint.setStyle(Paint.Style.STROKE);//设置画笔为线条模式 canvas.translate(0, deltaY * 2); Path path3 = new Path(); //用pointList记录不同的path的各处的连接点 List<Point> pointList = new ArrayList<Point>(); //1. 第一部分，绘制线段 path3.moveTo(0, 0); path3.lineTo(deltaX / 2, 0);//绘制线段 pointList.add(new Point(0, 0)); pointList.add(new Point(deltaX / 2, 0)); //2. 第二部分，绘制椭圆右上角的四分之一的弧线 RectF arcRecF1 = new RectF(0, 0, deltaX, deltaY); path3.arcTo(arcRecF1, 270, 90);//绘制圆弧 pointList.add(new Point(deltaX, deltaY / 2)); //3. 第三部分，绘制椭圆左下角的四分之一的弧线 //注意，我们此处调用了path的moveTo方法，将画笔的移动到我们下一处要绘制arc的起点上 path3.moveTo(deltaX * 1.5f, deltaY); RectF arcRecF2 = new RectF(deltaX, 0, deltaX * 2, deltaY); path3.arcTo(arcRecF2, 90, 90);//绘制圆弧 pointList.add(new Point((int)(deltaX * 1.5), deltaY)); //4. 第四部分，绘制二阶贝塞尔曲线 //二阶贝塞尔曲线的起点就是当前画笔的位置，然后需要添加一个控制点，以及一个终点 //再次通过调用path的moveTo方法，移动画笔 path3.moveTo(deltaX * 1.5f, deltaY); //绘制二阶贝塞尔曲线 path3.quadTo(deltaX * 2, 0, deltaX * 2.5f, deltaY / 2); pointList.add(new Point((int)(deltaX * 2.5), deltaY / 2)); //5. 第五部分，绘制三阶贝塞尔曲线，三阶贝塞尔曲线的起点也是当前画笔的位置 //其需要两个控制点，即比二阶贝赛尔曲线多一个控制点，最后也需要一个终点 //再次通过调用path的moveTo方法，移动画笔 path3.moveTo(deltaX * 2.5f, deltaY / 2); //绘制三阶贝塞尔曲线 path3.cubicTo(deltaX * 3, 0, deltaX * 3.5f, 0, deltaX * 4, deltaY); pointList.add(new Point(deltaX * 4, deltaY)); //Path准备就绪后，真正将Path绘制到Canvas上 canvas.drawPath(path3, paint); //最后绘制Path的连接点，方便我们大家对比观察 paint.setStrokeWidth(10);//将点的strokeWidth要设置的比画path时要大 paint.setStrokeCap(Paint.Cap.ROUND);//将点设置为圆点状 paint.setColor(0xff0000ff);//设置圆点为蓝色 for(Point p : pointList){ //遍历pointList，绘制连接点 canvas.drawPoint(p.x, p.y, paint); } }

界面如下所示：

这里写图片描述