Android 2d 绘图，有4个要求
- 画布（canvas，相当于打印机）
- 位图（bitmap，相当于纸张）
- 画笔（paint，相当于墨）
- 绘制元素
通常使用canvas绘图初始代码如下：
Canvas canvas = new Canvas();
Bitmap bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
初始化画布，设置位图，所有的绘制元素最终都将绘制在位图上（位图相当于纸张），通常画布无需初始化，在view的onDraw方法中，canvas作为函数参数，用户可直接使用。
canvas能直接绘制位图，因此便有“双缓冲绘图”技术。如上代码，使用新初始化的canvas绘制绘图元素，然后可将bitmap绘制在其它画布上，可加快绘制速度，给用户更流畅的用户体验。
canvas可绘制多种元素，包括点、线、矩形、圆、圆角矩形、弧线、椭圆，扇形等，也能绘制任意曲线，path对象。canvas还能进行裁剪，常见的两类矩形裁剪以及path裁剪，可使用裁剪功能，绘制出圆形图片（常见于圆形的头像等）。
canvas还能移动、旋转等操作，本质上是通过矩阵运算实现移动、旋转等。
本文先介绍canvas各类元素的绘制以及canvas裁剪。
弧线绘制
canvas.save();
canvas.translate(250, 10);
RectF oval = new RectF(0, 0, 100, 100);
mPaint.setColor(Color.RED);
canvas.drawArc(oval, 0, 90, false, mPaint);
canvas.restore();
drawArc各参数分别为：
- 决定弧线所在圆位置的矩形
- 开始角度
- 线束角度
- 是否使用圆心，如果为true，则实质上将绘制扇形
- 画笔
圆形绘制
//80是指距离canvas x边界的距离
//250、130则是指以view边界为基础向右移动250距离
canvas.save();
canvas.translate(250, 130);
canvas.drawCircle(80, 50, 50, mPaint);
canvas.restore();
drawCircle方法比较简单，分别为圆心坐标及半径长度。
圆角矩形绘制
canvas.save();
canvas.translate(250, 240);
RectF rect = new RectF(30, 0, 130, 100);
canvas.drawRoundRect(rect, 30, 30, mPaint);
canvas.restore();
圆角矩形，最常见例子就是iphone的app图标，矩形的四个角呈圆弧形。drawRoundRect方法各参数分别为：
- 矩形框位置
- 矩形四角的椭圆弧x轴半径
- 矩形四角的椭圆弧y轴半径
- 画笔
点、线等元素较简单，在此不再说明。
canvas的裁剪，可帮助开发者绘制更加复杂的图形，例如常见的圆形图片等。canvas裁剪可分成两类，矩形裁剪、path裁剪。在裁剪的区域之外，绘制的元素将不可见，这也是实现圆形图片等的基础。可对canvas进行多次裁剪，设定相应的标志位，将多次裁剪结果呈现
Region.Op.DIFFERENCE
//显示第一次裁剪画纸与第二次不同的地方。
canvas.save();
canvas.translate(160, 10);
canvas.clipRect(10, 10, 90, 90);
canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
drawScene(canvas);
canvas.restore();
Region.Op.REPLACE
//只显示第二次画纸裁剪
canvas.save();
canvas.translate(10, 130);
mPath.reset();
canvas.clipPath(mPath);
mPath.addCircle(50, 50, 50, Path.Direction.CCW);
canvas.clipPath(mPath, Region.Op.REPLACE);
drawScene(canvas);
canvas.restore();
Region.Op.UNION
//显示所有裁剪画纸
canvas.save();
canvas.translate(160, 130);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
drawScene(canvas);
canvas.restore();
Region.Op.XOR
//显示补集，也就是所有减去交集的裁剪操作
canvas.save();
canvas.translate(10, 240);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
drawScene(canvas);
canvas.restore();
Region.Op.REVERSE_DIFFERENCE
//显示第二次的不同于第一次的画纸裁剪
canvas.save();
canvas.translate(160, 240);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100, Region.Op.REVERSE_DIFFERENCE);
drawScene(canvas);
canvas.restore();
drawScene方法的实现为：
private void drawScene(Canvas canvas){
canvas.clipRect(0, 0, 100, 100);
canvas.drawColor(Color.WHITE);
mPaint.setColor(Color.RED);
canvas.drawLine(0, 0, 100, 100, mPaint);
mPaint.setColor(Color.GREEN);
canvas.drawCircle(30, 70, 30, mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawText("clipping", 100, 30, mPaint);
}
以上代码所有效果如图：
Paste_Image.png
Path介绍
文中多次提到path，可简单理解为一系列点的集合，可利用path绘制复杂的曲线，而不仅仅限于简单的几何图形。下面介绍path对象中的重要方法。
- reset，重置，将之前的path清空，重新初始化。
- moveTo，将path的起始点置于x、y位置，在path初始化时一定要调用的方法
- lineTo， 从当前点绘制一条线到x、y位置
- close， 回到初始点，形成一条封装的曲线
- addCircle， 绘制圆形
- quadTo， 和lineTo类似，不过它绘制的是贝塞尔曲线，线条更加圆润，不会有突兀的感觉，优于lineTo，此方法的第一个参数表示控制点坐标，控制点坐标与绘制贝塞尔曲线相关，常将其设置为当前坐标，后一个参数表示目标点坐标。
下方代码，根据手指滑动轨迹绘制曲线。
public class PathView extends View{
private Paint mPaint;
private Path mPath;
public PathView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PathView(Context context) {
super(context);
init();
}
private void init(){
Canvas canvas = new Canvas();
Bitmap bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
mPaint.setColor(Color.RED);
mPath = new Path();
}
float mX,mY;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mX = event.getX();
mY = event.getY();
mPath.reset();
mPath.moveTo(mX, mY);
break;
case MotionEvent.ACTION_MOVE:
float px = mX;
float py = mY;
float x = event.getX();
float y = event.getY();
float dx = Math.abs(x - px);
float dy = Math.abs(y - py);
if (dx >= 3 || dy >= 3) {
float rx = (x + px)/2;
float ry = (y + py)/2;
mPath.quadTo(px, py, rx, ry);
mX = x;
mY = y;
}
break;
}
invalidate();
return true;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
}
