Android绘图机制与处理技巧（二）Android绘图技巧

本篇来讲解一些Android中常用的绘图技巧，通过这些技巧学习来简化、优化Android的绘图操作。

Canvas

Canvas作为绘制图形的直接对象，提供了以下几个非常有用的方法。

• canvas.save()
• canvas.restore()
• canvas.rotate()
• canvas.translate()

canvas.save()方法可以理解为保存画布。它的作用就是将之前的所有已绘制图像保存起来，让后续的操作就好象在一个新的图层上操作一样，这一点与Photoshop中的图层理解基本一致。

canvas.restore()方法可以理解为Photoshop中的合并图层操作。它的作用是将我们在save()之后绘制的所有图像与save()之前的图像进行合并。

canvas.rotate()与canvas.translate()方法从字面上看，可以将它们理解为画布平移、画布翻转，但是把它理解为坐标系的平移与翻转则会更加形象。默认绘图坐标零点位于屏幕左上角，在调用translate(x, y)方法之后，则将原点(0, 0)移动到了(x, y)。之后的所有绘图操作都将以(x, y)为原点执行。同理，rotate()方法就是将坐标系旋转了一定的角度。没有这两个方法，同样可以绘图，只要计算好坐标，没有什么画布出来的。但是Android提供这些方法是用来帮助我们简化绘图的。例如，创建如下的一个仪表盘：

分析一下要完成这样一个图形，可以将它分解成以下几个元素：

• 仪表盘——外面的大圆
• 刻度线——包含四个长的刻度线和其它短的刻度线
• 刻度值——包含长刻度线对应的大的刻度值和其他小的刻度值
• 指针——中间的指针，一粗一细两根指针

第一步绘制圆盘，调用 canvas.drawCircle()方法绘制一个圆，关键在于确定圆心和半径。为了方便演示我们把圆心定在屏幕中心所以半径为屏幕宽的一半。

    //画外圆
    Paint paintCircle = new Paint();
    //FILL填充 FILL_AND_STROKE填充加描边 STROKE描边
    paintCircle.setStyle(Paint.Style.STROKE);
    //设置抗锯齿
    paintCircle.setAntiAlias(true);
    //设置画笔宽度
    paintCircle.setStrokeWidth(5);
    //params 圆心,半径  -5f为了抵消画笔宽度
    canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - 5f, paintCircle);

下面绘制刻度线，我们将画布以圆心为原点旋转到需要的角度，每当画好一根线，就旋转相应的角度。这样当我们把画布重新还原到旋转前的位置时，所有的刻度线就已经全部画好了。通过旋转画布——实际上是旋转了画图的坐标系，这就避免了进行复杂的三角函数运算。通过这样一种相对论式的变换，间接简化了绘图，这时再去绘制这些刻度线，就只需要区分整点与非整点刻度线就可以了，代码如下所示。

    // 画刻度与刻度线
    Paint paintDegree = new Paint();
    //从0开始画直线
    for (int i = 0; i < 24; i++) {
        if (i == 0 || i == 6 || i == 12 || i == 18) {
            //区分整点与非整点
            paintDegree.setStrokeWidth(5);
            paintDegree.setTextSize(30);
            paintCircle.setAntiAlias(true);
            //直线起点坐标为mHeight/2减去圆半径长度  +5f为抵消画笔宽度
            canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2 + 5f,
                    mWidth / 2, mHeight / 2 - mWidth / 2 + 60, paintDegree);
            String degree = String.valueOf(i);
            canvas.drawText(degree,
                    mWidth / 2 - paintDegree.measureText(degree) / 2,
                    mHeight / 2 - mWidth / 2 + 90, paintDegree);
        } else {
            paintDegree.setStrokeWidth(3);
            paintDegree.setTextSize(15);
            paintCircle.setAntiAlias(true);
            canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2 + 5f,
                    mWidth / 2, mHeight / 2 - mWidth / 2 + 30, paintDegree);
            String degree = String.valueOf(i);
            canvas.drawText(degree,
                    mWidth / 2 - paintDegree.measureText(degree) / 2,
                    mHeight / 2 - mWidth / 2 + 60, paintDegree);
        }
        //通过旋转画布简化坐标运算
        canvas.rotate(15, mWidth / 2, mHeight / 2);
    }

最后绘制那两根指针，同样只是简单地画两个线段而已，只要算好起始点的坐标就可以了。起点自然是圆心，终点就是在圆心的坐标基础上的加减。通过translate()方法将原点坐标（0,0）移动到圆心坐标，这样再画线段的时候就可以理解为从原点开始画一条线段了。

    //画圆心
    paintPointer.setStrokeWidth(30);
    canvas.drawPoint(mWidth / 2, mHeight / 2, paintPointer);
    //画指针
    paintHour.setStrokeWidth(20);
    paintMinute.setStrokeWidth(10);
    canvas.save();
    //平移坐标到圆心
    canvas.translate(mWidth / 2, mHeight / 2);
    canvas.drawLine(0, 0, 100, 100, paintHour);
    canvas.drawLine(0, 0, 100, 200, paintMinute);
    canvas.restore();

Layer

在Photoshop中，一张复杂的画可以由很多个图层叠加起来，形成一个复杂的图像。在Android中，使用saveLayer()方法来创建一个图层，图层同样是基于栈的结构进行管理的。

Android通过调用saveLayer()方法、saveLayerAlpha()方法将一个图层入栈，使用restore()方法、restoreToCount()方法将一个图层出栈。入栈的时候，后面所有的操作都发生在这个图层上，而出栈的时候，则会把图像绘制到上层Canvas上，下面是仿照Api Demos里的一个实例：

public class MyLayer extends View {

    private Paint mPaint;
    private static final int LAYER_FLAGS =
            Canvas.MATRIX_SAVE_FLAG |
                    Canvas.CLIP_SAVE_FLAG |
                    Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                    Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                    Canvas.CLIP_TO_LAYER_SAVE_FLAG;

    public MyLayer(Context context) {
        super(context);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        mPaint.setColor(Color.BLUE);
        canvas.drawCircle(150, 150, 100, mPaint);
        //alpha 255不透明，127半透明，0全透明
        canvas.saveLayerAlpha(0, 0, 400, 400, 255, LAYER_FLAGS);
        mPaint.setColor(Color.RED);
        canvas.drawCircle(200, 200, 100, mPaint);
        canvas.restore();
    }
}

在onDraw()方法中绘制两个相交的圆，当然这两个圆位于两个图层上。接下来，将后面的图层透明度设置为0～255不同的数值，看看不同透明度的值的效果有何不同。

当透明度为127，即半透明，效果如下图所示：

当透明度为255，即完全不透明，效果如下图所示：

当透明度为0，即完全透明，效果如下图所示：

代码下载