（十）Canvas 的基本使用

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一、概述

Canvas 我们经常把它理解为画板，但是，实际上 Canvas 是一个封装类，它包含了四个东西：

1、画板：用来保存像素的bitmap

2、画布或者画纸： Canvas 在 Bitmap 上进行绘制操作 —- （Layer—saveLayer操作时，新建一个透明的画布图层）

3、绘制的东西

4、绘制的画笔 Paint

二、Canvas 的基本方法

1.画直线

  canvas.drawLine(0, 0, 100, 100, paint);

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
startX： 起始点 x 坐标
startY ：起始点 y坐标
stopX： 结束点 x 坐标
stopY ：结束点 y坐标
paint ：画笔

2.画多条直线

    float []pts = {0,0,100,100,200,200,300,300};    canvas.drawLines(pts, paint);

drawLines(float[] pts, Paint paint)
pts : 直线的端点数组，每 4 个点为一条直线

drawLines(float[] pts, int offset, int count, Paint paint)
pts : 直线的端点数组，每 4 个点为一条直线
offset ： 跳过的数据个数，跳过的数据不参与直线绘制
count ： 实际参与绘制的数据个数

3.画点

    canvas.drawPoint(50, 50, paint);

drawPoint(float x, float y, Paint paint)
x : 点的 x 坐标
y : 点的 y 坐标

4.画多个点

    float []pts = {0,0,100,100,200,200,300,300};       canvas.drawPoints(pts, paint);

drawPoints(float[] pts, Paint paint)
pts : 点的坐标数组，每 2个点为一个点

drawPoints(float[] pts, int offset, int count, Paint paint)
pts : 点的坐标数组，每 2个点为一个点
offset ： 跳过的数据个数，跳过的数据不参与点绘制
count ： 实际参与绘制的数据个数

5.画矩形

    RectF r = new RectF(100, 100, 400, 500);    canvas.drawRect(r, paint);

    canvas.drawRectdrawRect(100, 100, 400, 500, paint);

drawRect(RectF rect, Paint paint)
rect ： 矩形区域

drawRect(Rect r, Paint paint)
r ： 矩形区域

drawRect(float left, float top, float right, float bottom, Paint paint)
left ： 左边的 x 坐标
top ：上边的 y 坐标
right ： 右边的 x 坐标
bottom ： 底边的 y 坐标

注：RectF 和 Rect 主要区别是精度，RectF 使用的是 float， Rect 使用的是 int。

6.画圆角矩形

    RectF r = new RectF(100, 100, 400, 500);    canvas.drawRoundRect(r, 30, 30, paint);

    canvas.drawRoundRect(100, 100, 400, 500, 30, 30, paint);

drawRoundRect(RectF rect, float rx, float ry, Paint paint)
rect ： 矩形区域
rx：x方向上的圆角半径。
ry：y方向上的圆角半径。

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
left ： 左边的 x 坐标
top ：上边的 y 坐标
right ： 右边的 x 坐标
bottom ： 底边的 y 坐标
rx：x方向上的圆角半径。
ry：y方向上的圆角半径。

7.画圆

    canvas.drawCircle(300, 300, 200, paint);

drawCircle(float cx, float cy, float radius, Paint paint)
cx ： 圆心的x坐标
cy ： 圆心的y坐标
radius ： 圆的半径

8.画椭圆

    RectF r = new RectF(100, 100, 400, 500);    canvas.drawOval(r, paint);

    canvas.drawOval(100, 100, 400, 500, 30, 30, paint);

drawOval(RectF oval, Paint paint)
oval ： 外切矩形区域

drawOval(float left, float top, float right, float bottom, Paint paint)
left ： 外切矩形左边的 x 坐标
top ：外切矩形上边的 y 坐标
right ： 外切矩形右边的 x 坐标
bottom ：外切矩形 底边的 y 坐标

9.画圆弧

    RectF r = new RectF(100, 100, 400, 500);    canvas.drawArc(r, 0, 90, true, paint);

    canvas.drawArc(100, 100, 400, 500, 0, 90, true, paint);

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
oval : 圆弧所在椭圆外切矩形
startAngle ： 圆弧的起始角度（0 为 x轴正方向）
sweepAngle ： 圆弧的角度
useCenter：是否显示半径连线，true表示显示圆弧与圆心的半径连线，false表示不显示

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
left ： 圆弧所在外切矩形左边的 x 坐标
top ：圆弧所在外切矩形上边的 y 坐标
right ： 圆弧所在外切矩形右边的 x 坐标
bottom ：圆弧所在外切矩形 底边的 y 坐标
startAngle ： 圆弧的起始角度（0 为 x轴正方向）
sweepAngle ： 圆弧的角度
useCenter：是否显示半径连线，true表示显示圆弧与圆心的半径连线，false表示不显示

把 useCenter 改为 false：

10.画路径

        Path path = new Path();        //画笔落笔的位置        path.moveTo(100, 100);        //移动        path.lineTo(200, 100);        path.lineTo(200, 200);        path.cubicTo(250, 200, 400, 250, 450, 400);        path.close();        canvas.drawPath(path, paint);

drawPath(Path path, Paint paint)
path : 路径

path 部分不在这边细讲。

三、Canvas 画区域

Canvas 除了画常用的形状之外，还能画 Region ，它表示的 Canvas 图层上的一块封闭的区域。由于区域是不规则的，所以在绘制的时候会被切割成多个矩形，通过迭代进行绘制。

    Paint paint = new Paint();    paint.setColor(Color.RED);    //样式必须设为 STROKE，否则看不出效果    paint.setStyle(Paint.Style.STROKE);    paint.setStrokeWidth(2);    RectF r = new RectF(100, 100, 600, 800);    Path path = new Path();    path.addOval(r, Path.Direction.CCW);    //创建一块矩形的区域    Region region = new Region(100, 100, 600, 800);    Region region1 = new Region();    //path的椭圆区域和矩形区域进行交集    region1.setPath(path, region);    //结合区域迭代器使用（得到图形里面的所有的矩形区域）    RegionIterator iterator = new RegionIterator(region1);    Rect rect = new Rect();    //通过迭代，进行区域的绘制    while (iterator.next(rect)) {        canvas.drawRect(rect, paint);    }   

区域的叠加规则

区域叠加规则枚举类 Op 的源码：

    public enum Op {        DIFFERENCE(0),        INTERSECT(1),        UNION(2),        XOR(3),        REVERSE_DIFFERENCE(4),        REPLACE(5);        Op(int nativeInt) {            this.nativeInt = nativeInt;        }        /**         * @hide         */        public final int nativeInt;    }

效果图中 A 为调用者， B 为叠加上来的区域。

op(Rect r, Op op)
r： 叠加上去的矩形
op ： 叠加规则

op(int left, int top, int right, int bottom, Op op)
left ： 叠加上去的矩形左边的 x 坐标
top ：叠加上去的矩形上边的 y 坐标
right ： 叠加上去的矩形右边的 x 坐标
bottom ：叠加上去的矩形 底边的 y 坐标
op ： 叠加规则

op(Region region, Op op)
region： 叠加上去的区域
op ： 叠加规则

四、Canvas 坐标系

        Paint paint = new Paint();        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(10);        RectF r = new RectF(0, 0, 400, 500);        paint.setColor(Color.GREEN);        canvas.drawRect(r, paint);        //平移        canvas.translate(50, 50);        paint.setColor(Color.BLUE);        canvas.drawRect(r, paint);

上方代码先绘制一个矩形，然后进行平移操作，后再次绘制一个矩形。在 translate(50, 50) 里平移的是 Canvas 的绘图坐标系，而不是 Canvas。我们可以稍微证明一下。

        Paint paint = new Paint();        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(10);        RectF r = new RectF(0, 0, 400, 500);        paint.setColor(Color.GREEN);        canvas.drawRect(r, paint);        //平移        canvas.translate(50, 50);        canvas.drawColor(Color.YELLOW);        paint.setColor(Color.BLUE);        canvas.drawRect(r, paint);

在平移后给画布填充颜色，发现整个屏幕都充满，说明平移的不是画布。

Canvas里面牵扯两种坐标系：Canvas 自己的坐标系、绘图坐标系。

1.Canvas 自己的坐标系

它就在View的左上角，做坐标原点往右是X轴正半轴，往下是Y轴的正半轴，有且只有一个，唯一不变。

2..Canvas 绘图坐标系

它不是唯一不变的，它与Canvas的Matrix有关系，当Matrix发生改变的时候，绘图坐标系对应的进行> > 改变。

用画直线的方法把平移前后的坐标系画出来。可以发现平移之后坐标系变了。

        RectF r = new RectF(0, 0, 400, 500);        paint.setColor(Color.GREEN);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴        canvas.translate(50, 50);        paint.setColor(Color.BLUE);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

继续进行旋转45度。

        RectF r = new RectF(0, 0, 400, 500);        paint.setColor(Color.GREEN);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴        canvas.translate(50, 50);        paint.setColor(Color.BLUE);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴        canvas.rotate(45);        paint.setColor(Color.YELLOW);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

结论：绘制坐标的变化跟矩阵 Matrix 有关。Matrix又是通过我们设置translate、rotate、scale、skew来进行改变的

3.Canvas 绘图坐标系的重置

Canvas 绘制坐标系的变化过程是不可逆的，只能通过 save 和 restore 方法来保存和还原变化操作

    RectF r = new RectF(0, 0, 400, 500);        paint.setColor(Color.GREEN);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴        canvas.save();        canvas.translate(50, 50);        paint.setColor(Color.BLUE);        canvas.drawRect(r, paint);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴        canvas.restore();        canvas.rotate(45);        paint.setColor(Color.YELLOW);        canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴        canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴

在第一次变化坐标前 save，绘制坐标系后 restore， 再次进行坐标变化是从最开始的坐标系进行变化。说明第一次变化后，坐标系重置还原了。

五、Canvas的状态保存—状态栈、Layer栈

1.状态栈 – save、 restore 方法

1.只是保存和还原变换操作 Matrix 以及 Clip 剪裁，
2.可以通过 restoretoCount 直接还原到对应栈的保存状态。
3.不是真正的图层关系

2.Layer栈

1.真正的图层关系，saveLayer 的时候都会新建一个透明的图层（离屏 Bitmap-离屏缓冲），并且会将saveLayer 之前的一些 Canvas 操作延续过来
2. 后续的绘图操作都在新建的layer上面进行
3.当我们调用restore 或者 restoreToCount 时会更新到对应的图层和画布上

saveLayer 可以实现所有 save 的实现效果。save 只是在栈中保存 Matrix 以及 Clip 剪裁的变换记录，当开始绘制的时候，根据栈中保存的变换记录得出最终的绘制坐标，从而进行绘制。saveLayer 是把前面的操作保存成一个 Layer 存入栈中，再新建一个 Layer，后续绘制在新的 Layer 上进行，新绘制的 Layer 可以根据 saveLayer 的时候传的参数进行选择保存上一个 Layer 的哪些 Matrix 以及 Clip 剪裁的变换。

目前个人除了在使用 Xfermode 的时候，用 save（） 方法的话，原先绘制的背景会对浑噩结果造成影响，所以要用 saveLayer（）。其他地方使用暂时没有发现区别。