Android中Canvas绘图基础详解（附源码下载）_H5之家

Android中，如果我们想绘制复杂的自定义View或游戏，我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法，我们可以通过这些方法绘制各种各样的图形。Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint。Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面，在drawXXX方法中我们需要传入要绘制的图形的坐标形状，还要传入一个画笔Paint。drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状，比如drawCircle方法，用来绘制圆形，需要我们传入圆心的x和y坐标，以及圆的半径。drawXXX方法中传入的画笔Paint决定了绘制的图形的一些外观，比如是绘制的图形的颜色，再比如是绘制圆面还是圆的轮廓线等。Android系统的设计吸收了很多已有系统的诸多优秀之处，比如Canvas绘图。Canvas不是Android所特有的，Flex和Silverlight都支持Canvas绘图，Canvas也是HTML5标准中的一部分，主流的现代浏览器都支持用JavaScript在Canvas上绘图，如果你用过HTML5中的Canvas，你会发现Android的Canvas的绘图API与其很相似。总之，Canvas绘图不是Android所特有的。

为了演示Android中各种drawXXX方法的时候，我做了一个App，通过单击相应的按钮绘制相应的图形，主界面如下所示：

这里写图片描述

Canvas坐标系与绘图坐标系

Canvas绘图中牵扯到两种坐标系：Canvas坐标系与绘图坐标系。

Canvas坐标系
Canvas坐标系指的是Canvas本身的坐标系，Canvas坐标系有且只有一个，且是唯一不变的，其坐标原点在View的左上角，从坐标原点向右为x轴的正半轴，从坐标原点向下为y轴的正半轴。

绘图坐标系
Canvas的drawXXX方法中传入的各种坐标指的都是绘图坐标系中的坐标，而非Canvas坐标系中的坐标。默认情况下，绘图坐标系与Canvas坐标系完全重合，即初始状况下，绘图坐标系的坐标原点也在View的左上角，从原点向右为x轴正半轴，从原点向下为y轴正半轴。但不同于Canvas坐标系，绘图坐标系并不是一成不变的，可以通过调用Canvas的translate方法平移坐标系，可以通过Canvas的rotate方法旋转坐标系，还可以通过Canvas的scale方法缩放坐标系，而且需要注意的是，translate、rotate、scale的操作都是基于当前绘图坐标系的，而不是基于Canvas坐标系，一旦通过以上方法对坐标系进行了操作之后，当前绘图坐标系就变化了，以后绘图都是基于更新的绘图坐标系了。也就是说，真正对我们绘图有用的是绘图坐标系而非Canvas坐标系。

为了更好的理解绘图坐标系，请看如下的代码：

//绘制坐标系 private void drawAxis(Canvas canvas){ int canvasWidth = canvas.getWidth(); int canvasHeight = canvas.getHeight(); paint.setStyle(Paint.Style.STROKE); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(6 * density); //用绿色画x轴，用蓝色画y轴 //第一次绘制坐标轴 paint.setColor(0xff00ff00);//绿色 canvas.drawLine(0, 0, canvasWidth, 0, paint);//绘制x轴 paint.setColor(0xff0000ff);//蓝色 canvas.drawLine(0, 0, 0, canvasHeight, paint);//绘制y轴 //对坐标系平移后，第二次绘制坐标轴 canvas.translate(canvasWidth / 4, canvasWidth /4);//把坐标系向右下角平移 paint.setColor(0xff00ff00);//绿色 canvas.drawLine(0, 0, canvasWidth, 0, paint);//绘制x轴 paint.setColor(0xff0000ff);//蓝色 canvas.drawLine(0, 0, 0, canvasHeight, paint);//绘制y轴 //再次平移坐标系并在此基础上旋转坐标系，第三次绘制坐标轴 canvas.translate(canvasWidth / 4, canvasWidth / 4);//在上次平移的基础上再把坐标系向右下角平移 canvas.rotate(30);//基于当前绘图坐标系的原点旋转坐标系 paint.setColor(0xff00ff00);//绿色 canvas.drawLine(0, 0, canvasWidth, 0, paint);//绘制x轴 paint.setColor(0xff0000ff);//蓝色 canvas.drawLine(0, 0, 0, canvasHeight, paint);//绘制y轴 }

界面如下所示：