Android canvas 总结

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);
}
}