canvas_content.png

1.Canvas

Canvas 是我们绘制各种图形或文字时主要的操作对象，因为绘制绘制过程调用的都是它的 drawXX 方法。官方给出的 Canvas 的解释：

The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).

Canvas 提供各种 draw 方法，为了绘制，需要 4 个基本组件，持有像素的位图，拥有绘制方法的画布（Canvas,能够往位图中写入像素），绘制的基本元素，如矩形，路径，文字，图片等，还有一个画笔（Paint），画笔用来给出所画事物的颜色、样式等。

在之前一篇文章 自定义 View - Paint 详解，讲解了 Paint 的用法和各种属性设置，在其中也提到很别扭的一点，绘制过程按照常规想法，不是应该是 paint.DrawXX 么。为了便于记忆，个人觉得可以这样理解，所有的动作时在画布上执行的，那么就需要准备各种材料（画笔，位置等），执行的动作就是画，即函数名。

Canvas 的方法很多，用的不熟练的话，也记不住这时候就需要整理一下，需要时查一下表。

2.Canvas 的常用操作速查表

3.Canvas 操作

画布常见的操作有以下 3 种：几何变换、范围裁剪和画布保存和回滚

先来看几何变换

3.1 几何变换

画布的几何变换实际上是对画布位置的变换，变换之后在进行绘制操作，这样就能够得到我们希望图形正确的形状和位置，也能够避免我们自己去进行复杂的计算来得到从开始到最终的坐标。

(1) 平移

平移是坐标系的移动，可以为图形绘制选择一个合适的坐标系。

注意，位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动可以看到下面两次移动，可以叠加。

    // 平移
    mPaint.setColor(Color.GREEN);
    canvas.translate(200,200);
    canvas.drawCircle(0,0,100, mPaint);

    mPaint.setColor(Color.BLUE);
    canvas.translate(200,200);
    canvas.drawCircle(0,0,100, mPaint);

translate.png

(2) 缩放

缩放提供了两个方法，如下：

 public void scale (float sx, float sy)

 public final void scale (float sx, float sy, float px, float py)

这两个方法中前两个参数是相同的分别为x轴和y轴的缩放比例。而第二种方法比前一种多了两个参数，用来控制缩放中心位置。

缩放比例(sx,sy)取值范围详解：

如果在缩放时稍微注意一下就会发现<b>缩放的中心默认为坐标原点,而缩放中心轴就是坐标轴</b>，如下：

// 2.缩放
//        mPaint.setStyle(Paint.Style.STROKE);
//        mPaint.setStrokeWidth(2);
//        mPaint.setColor(Color.GREEN);
//        canvas.drawCircle(0, 0, 200, mPaint);
        // 缩放方法一
////        canvas.scale(2, 2);
        // 缩放方法二
//        canvas.scale(0.5f, 0.5f,0,200);
//        mPaint.setColor(Color.BLUE);
//        canvas.drawCircle(0, 0, 200, mPaint);

        // 缩小效果
        // 将坐标系原点移动到画布正中心
//        canvas.translate(getWidth() / 2, getHeight() / 2);
//        for (int i = 0; i <= 20; i++) {
//            mPaint.setStyle(Paint.Style.STROKE);
//            mPaint.setStrokeWidth(5);
//            mPaint.setColor(Color.BLUE);
//            canvas.scale(0.9f, 0.9f);
//            canvas.drawCircle(0, 0, 400, mPaint);
//        }

scale.png

scale_demo.png

(3) 旋转

旋转提供了两种方法：

  public void rotate (float degrees)
  
  public final void rotate (float degrees, float px, float py)

和缩放一样，第二种方法多出来的两个参数依旧是控制旋转中心点的。

// 3.旋转
        RectF rect = new RectF(0,-400,400,0);
        mPaint.setColor(Color.BLACK);
        canvas.drawRect(rect,mPaint);

        // 默认旋转一
//        canvas.rotate(180);
//        mPaint.setColor(Color.BLUE);
//        canvas.drawRect(rect,mPaint);

        // 旋转二
        canvas.rotate(180,100,0);
        mPaint.setColor(Color.BLUE);
        canvas.drawRect(rect,mPaint);

将黑色矩形围绕原点旋转 180°

rotate_1.png

旋转 180° 后向右移动 100 的距离

rotate_2.png

(4) 错切

skew 这里翻译为错切，错切是特殊类型的线性变换。

错切只提供了一种方法：

  public void skew (float sx, float sy)

<b>参数含义：

float sx:将画布在x方向上倾斜相应的角度，sx倾斜角度的tan值，

float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值.</b>

变换后:

X = x + sx * y
Y = sy * x + y

下面看一下效果：

skew.png

(5) 矩阵变换

使用矩阵需要了解一些数学相关的知识，这里给出平移、旋转和缩放的几张图，也很容易理解。

translate_matrix.png

scale_matrix.png

rotate_matrix.png

使用矩阵变换来控制画布的步骤：

(1) 创建 Matrix 对象；

(2) 调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换；

(3) 使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas。

其中，Canvas.setMatrix(matrix)：用 Matrix 直接替换 Canvas 当前的变换矩阵。Canvas.concat(matrix)：用 Canvas 当前的变换矩阵和 Matrix 相乘，即基于 Canvas 当前的变换，叠加上 Matrix 中的变换。

这里仅仅示例一下平移和缩放，其他效果自己试试：

        canvas.translate(getWidth() / 2, getHeight() / 2);
//        Matrix matrix = new Matrix();
//        matrix.postTranslate(200,200);
//        canvas.setMatrix(matrix);
//        // = canvas.translate(200, 200);

//        mPaint.setColor(Color.BLUE);
//        canvas.drawCircle(0, 0, 100, mPaint);

        for (int i = 0; i < 20; i++) {
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setColor(Color.BLUE);
            mPaint.setStrokeWidth(3);
            Matrix matrix = new Matrix();
            matrix.postScale(0.9f, 0.9f);
            canvas.concat(matrix);
            canvas.drawCircle(0, 0, 400, mPaint);
        }

3.2 范围裁剪

这里说明一下，范围裁剪是不可逆的，所以要加上 Canvas.save() 和 Canvas.restore() 来及时恢复绘制范围。

(1) clipRect()

裁剪指定矩形区域部分，也就是将矩形区域部分去掉。

    canvas.save();
    // 裁剪是裁掉的部分，也就是说原图 - 这部分
    canvas.clipOutRect(0, 200, 300, 400);
    canvas.drawBitmap(bitmap, 0, 0, paint);
    canvas.restore();

clip_rect.png

(2) clipPath()

路径裁剪，通过路径裁剪可以使用更多的形状，矩形、圆形以及其他自定义的形状等。

        Point point1 = new Point( 150,  200);
        Point point2 = new Point( 150,  200);

        path1.addCircle(point1.x,point1.y,150,Path.Direction.CW);
        path2.addCircle(point1.x,point1.y,150,Path.Direction.CCW);
        path2.setFillType(Path.FillType.INVERSE_WINDING);
        // path1
//        canvas.save();
//        // 裁剪是裁掉的部分，也就是说原图 - 这部分
//        canvas.clipPath(path1);
//        canvas.drawBitmap(bitmap, 0, 0, paint);
//        canvas.restore();

        // path2
        canvas.save();
        // 裁剪是裁掉的部分，也就是说原图 - 这部分
        canvas.clipPath(path2);
        canvas.drawBitmap(bitmap, 0, 0, paint);
        canvas.restore();

clip_path1.png

clip_path2.jpg

3.3 画布保存和回滚

(1) 保存

画布操作是不可逆过程，所以对画布操作前，先对状态进行保存，以便在需要之前的状态时能够恢复

常用的保存于恢复操作比较简单：

 1.save() 或 save(int flag) 保存
 
 2.画布操作，以及绘制过程
 
 3.restore();恢复

saveLayerXxx
saveLayerXxx有比较多的方法：实际上就是根据选定的区域，以及透明度等设定来保存图层，操作相对于 save 更细。

// 无图层alpha(不透明度)通道
public int saveLayer (RectF bounds, Paint paint)
public int saveLayer (RectF bounds, Paint paint, int saveFlags)
public int saveLayer (float left, float top, float right, float bottom, Paint paint)
public int saveLayer (float left, float top, float right, float bottom, Paint paint, int saveFlags)

// 有图层alpha(不透明度)通道
public int saveLayerAlpha (RectF bounds, int alpha)
public int saveLayerAlpha (RectF bounds, int alpha, int saveFlags)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha, int saveFlags)

(2) 恢复

canvas_stack.png

restore

状态回滚，从栈顶取出一个状态然后根据内容进行恢复。

调用一次 restore 方法则从状态栈中取出一次，根据里面保存的状态进行状态恢复。

restoreToCount

弹出指定位置以及以上所有状态，并根据指定位置状态进行恢复。如果调用restoreToCount(2) 则会弹出 2 3 4 5 的状态，并根据第2次保存的状态进行恢复。

getSaveCount

获取保存的次数，即状态栈中保存状态的数量，使用该函数的返回值为5。该函数的最小返回值为1，即使弹出了所有的状态，返回值依旧为1，代表默认状态。

4 参考

Canvas

Canvas之画布操作

自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix

练习代码地址