Android绘制工具Canvas

最新推荐文章于 2024-08-06 20:51:14 发布

Exploring1024

最新推荐文章于 2024-08-06 20:51:14 发布

阅读量1.8k

点赞数

分类专栏： Android基础文章标签： Android Canvas android画布

本文链接：https://blog.csdn.net/Mr_dsw/article/details/72887547

版权

Android基础同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

Android从零单排

4 篇文章 0 订阅

订阅专栏

在Android自定义View的学习中，我们经常需要绘制，Canvas类就承担起绘制的作用。在Android中，绘制一个View需要四个基本的步骤：

一个视图或者像素的承载体：Bitmap
一个绘制方法的承载体：Canvas
绘制物：Rect、Path、text、Bitmap
绘制方式的承载体：Paint

如何构建一个Canvas对象

通过查看Canvas的api得知：

Canvas()：创建一个空的栅格画布。
Canvas(Bitmap bitmap)：构建一个指定bitmap的画布。

构造方法有两种，一种是创建空的栅格画布画布对象用来绘制。另一种是构建一个Canvas对象，绘制在Bitmap上。

Canvas方法介绍

1、clipXXX：裁剪画布

clipPath(Path path)：裁剪掉指定的path区域的Canvas
clipPath(Path path, Region.Op op)：裁剪掉指定的path区域的Canvas，同时指定与上次裁剪的类型。
clipRect(int left, int top, int right, int bottom)：裁剪掉指定矩形的Canvas区域
clipRect(float left, float top, float right, float bottom)：裁剪指定区域
clipRect(RectF rect)：裁剪指定矩形区域
clipRect(float left, float top, float right, float bottom, Region.Op op)
clipRect(Rect rect)
clipRegion(Region region)
clipRegion(Region region, Region.Op op)

在ClipXX方法中，可以分为三类：Path类、Rect类、Region类。注意，**在ClipXX的方法中，通过ClipXX方法，即改变显示区域，但是坐标区域并没有改变。**在ClipXX方法中，我们需要重要介绍下Region.Op（区域操作符）的使用。

通过查看源码，Region.Op是一个枚举类型：

// the native values for these must match up with the enum in SkRegion.h
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。介绍如下：

Region.Op.DIFFERENCE：A-B的差集，即裁剪Canvas区域显示A与B的差集。
Region.Op.INTERSECT：A∩B的交集，即裁剪Canvas区域显示A与B的差集。
Region.Op.UNION：A∪B的并集，即裁剪Canvas区域显示A与B的并集。
Region.Op.XOR：a⊕b的异或，即裁剪Canvas区域显示A与B的异或。如果A与B有相交，则A、B的并集减去相交的部分。如果A与B不想交，则显示A、B的并集。
Region.Op.REVERSE_DIFFERENCE：反转差集，即B-A生成的差集。即裁剪区域显示B-A的差集。
Region.Op.REPLACE：用当前要剪切的区域代替之前剪切过的区域。

在这里，通过简单的实例看下效果。

private void createBitmap(){
    //创建一个空白的Bitmap对象
    Bitmap bitmap = Bitmap.createBitmap(400,400, Bitmap.Config.ARGB_8888);
    //绘制一个矩形区域
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    paint.setColor(Color.parseColor("#ffaacc"));
    canvas.drawRect(0, 0, 500, 500,paint);

    //裁剪出一个矩形,区域A
    canvas.clipRect(100,100,300,300);

    //再次裁剪一个区域，区域B
    Path path = new Path();
    path.addCircle(100,100,100, Path.Direction.CW);
    //此处修改op的值，来进行判断。
    canvas.clipPath(path, Region.Op.REPLACE);

    //裁剪后，绘制Canvas的画布
    paint.setColor(Color.parseColor("#00aacc"));
    canvas.drawRect(0, 0, 500, 500,paint);
    iv_image.setImageBitmap(bitmap);
}

通过上面的简单案例，我们通过修改以下代码片段，来修改效果：

//此处修改op的值，来进行判断。
canvas.clipPath(path, Region.Op.REPLACE);

1、Region.Op.DIFFERENCE效果

2、Region.Op.INTERSECT

3、Region.Op.UNION

4、Region.Op.XOR

5、Region.Op.REVERSE_DIFFERENCE

6、Region.Op.REPLACE

2、drawXXX系列方法

Canvas是我们的画布，给我们提供了一系列的方法满足我们在画布上进行绘制的需求，通过对api的分类，主要可以分为以下几种的绘制：

drawArc：绘制圆弧。
drawARGB：给整个可见的画布区域绘制颜色，即背景色。
drawBitmap：绘制Bitmap对象。
drawBitmapMesh：
drawCircle：绘制圆形。
drawColor：给整个可见的画布区域绘制颜色，即背景色。同drawARGB。
drawLine(s)：绘制线条。
drawOval：绘制椭圆。
drawPaint：给Canvas设置画笔paint。
drawPatch：绘制.9.png图片。
drawPath：绘制Path路径。
drawPicture：绘制Picture对象。
drawPoint(s)：绘制点。
drawRect：绘制矩形。
drawRoundRect：绘制圆角矩形。
drawRGB：给整个可见的画布区域绘制颜色，即背景色。同drawARGB。
drawText：绘制文本。

1、drawArc：绘制圆弧

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
public void drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

以上两个方法中，本质的核心都是根据指定的RectF矩形约束的范围进行圆弧的绘制。重点的以下几个参数的约束。

startAngle：起始角度，这里需要注意：如果起始角度<0或>=360度，则取angle %360作为起始角度。
sweepAngle：如果旋转角度>360度，则绘制全部。这点不同于path.arcTo的angle%360度取余数。如果angle是负数，则进行取余处理。
useCenter：如果设置中心，则绘制圆弧的时候连接起点、中点和终点的连线闭合。

此处补充一点，负数的余数是负整数<=0，正数的余数是正整数>=0。绘制的圆弧会自动进行缩放来填充指定矩形的椭圆形状，不会超过指定的矩形区域大小。换种说法，绘制的圆弧片段是矩形的内切椭圆上的指定角度的圆弧。

/**
 * 绘制圆弧
 */
private void drawArc(){
    //创建空白的Bitmap对象
    Bitmap bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    //绘制我们约束的矩形的范围，以便形成对比
    RectF rect = new RectF(100,200,400,400);
    canvas.drawRect(rect,paint);

    //绘制圆弧的形状
    paint.setColor(Color.CYAN);
    canvas.drawArc(rect,-180,90,false,paint);
    canvas.drawArc(rect,20,80,true,paint);
    iv_image.setImageBitmap(bitmap);
}

效果图：

2、drawBitmap系列：绘制Bitmap资源

drawBitmap(int[] colors, int offset, int stride, float x, float y, int width, int height, boolean hasAlpha, Paint paint)：将集合中的Colors绘制成Bitmap对象。需要开启硬件加速器，已经在api21中过期。
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)：绘制一个给定matrix的Bitmap对象。
drawBitmap(int[] colors, int offset, int stride, int x, int y, int width, int height, boolean hasAlpha, Paint paint)：将集合中的Colors绘制成Bitmap对象。需要开启硬件加速器，已经在api21中过期。
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)：绘制一个适应给定RectF大小的Bitmap资源。
drawBitmap(Bitmap bitmap, float left, float top, Paint paint)：在left、top的位置出绘制一个Bitmap资源。
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

绘制Bitmap对象。

private class BitmapView extends View{
    Paint paint = null;
    Bitmap bitmap = null;
    public BitmapView(Context context) {
        super(context);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setFlags(Paint.DITHER_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher)
                .copy(Bitmap.Config.ARGB_8888,true);
        drawBitmap(canvas, 100, 100, paint);
        drawBitmapWithMatrix(canvas);
        drawBitmapWithRect(canvas);
        drawBitmapColors(canvas);
    }

    /**
     * 在指定的位置绘制Bitmap对象
     * @param canvas
     * @param left
     * @param top
     * @param paint
     */
    private void drawBitmap(Canvas canvas, int left, int top, Paint paint){
        canvas.drawBitmap(bitmap, left, top,paint);
    }

    /**
     * 绘制指定Matrix变换的bitmap
     * @param canvas
     */
    private void drawBitmapWithMatrix(Canvas canvas){
        Matrix matrix = new Matrix();
        matrix.setTranslate(200,200);
        matrix.postRotate(30);
        canvas.drawBitmap(bitmap, matrix, paint);
    }

    /**
     * 绘制指定DstRect大小的Bitmap
     * @param canvas
     */
    private void drawBitmapWithRect(Canvas canvas){
        Rect rectSrc = new Rect(0,0,100,100);
        Rect rectDst = new Rect(100,100,300,400);
        canvas.drawBitmap(bitmap, rectSrc,rectDst,paint);
    }

    private void drawBitmapColors(Canvas canvas){
        Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
        canvas.setBitmap(bitmap);
        canvas.drawBitmap(new int[]{Color.RED,Color.BLUE,Color.GREEN},
                1,1,0,0,200,200,false,paint);
    }
}

3、drawColor系列 Canvas为我们提供了绘制背景色的方法。

drawARGB(int a, int r, int g, int b)
drawColor(int color)
drawColor(int color, PorterDuff.Mode mode)
drawRGB(int r, int g, int b)

首先简单介绍下几个参数：

a：透明度，取值(0..255)，0表示完全透明，255表示完全不透明
r：三元素中的红，取值(0..255)
g：三元素中的绿，取值(0..255)
b：三元素中的蓝，取值(0..255)
PorterDuff.Mode：颜色混合模式，共有18中混合方式。

在drawColor系列的方法中，我认为掌握的难点就是针对PorterDuff.Mode的掌握和使用。

PorterDuff.Mode.CLEAR：所绘制不会提交到画布上。
PorterDuff.Mode.SRC：显示上层绘制图片
PorterDuff.Mode.DST：显示下层绘制图片
PorterDuff.Mode.SRC_OVER：正常绘制显示，上下层绘制叠盖。
PorterDuff.Mode.DST_OVER：上下层都显示。下层居上显示。
PorterDuff.Mode.SRC_IN：取两层绘制交集。显示上层。
PorterDuff.Mode.DST_IN：取两层绘制交集。显示下层。
PorterDuff.Mode.SRC_OUT：取上层绘制非交集部分。
PorterDuff.Mode.DST_OUT：取下层绘制非交集部分。
PorterDuff.Mode.SRC_ATOP：取下层非交集部分与上层交集部分
PorterDuff.Mode.DST_ATOP：取上层非交集部分与下层交集部分
PorterDuff.Mode.XOR：异或：去除两图层交集部分
PorterDuff.Mode.DARKEN：取两图层全部区域，交集部分颜色加深
PorterDuff.Mode.LIGHTEN：取两图层全部，点亮交集部分颜色
PorterDuff.Mode.MULTIPLY：取两图层交集部分叠加后颜色
PorterDuff.Mode.SCREEN：取两图层全部区域，交集部分变为透明色
PorterDuff.Mode.ADD：饱和度叠加
PorterDuff.Mode.OVERLAY：像素是进行 Multiply （正片叠底）混合还是 Screen （屏幕）混合，取决于底层颜色，但底层颜色的高光与阴影部分的亮度细节会被保留

注意：在上面的描述中下层的图层对应的是Dst图层，上层对应的是Src图层。注意PorterDuff.Mode是作用于相互叠加的位置。

通过一段测试代码进行测试该功能的使用。

/**
 * PorterDuff的使用测试
 */
private void drawColorWithPorterDuff(){
    //首先我们创建一个绘制的背景画布
    Bitmap bitmapBG = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Bitmap bitmapDst = createDst(400, 400);
    Bitmap bitmapSrc = createSrc(400, 400);
    Canvas canvas = new Canvas(bitmapBG);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    canvas.drawColor(Color.GRAY);

    int sc = canvas.saveLayer(0, 0, 400, 400,null,
            Canvas.CLIP_TO_LAYER_SAVE_FLAG);
    //创建Dst图,绘制出来
    canvas.drawBitmap(bitmapDst,0,0,paint);
    //创建Src图
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmapSrc,0,0,paint);
    canvas.restoreToCount(sc);
    iv_image.setImageBitmap(bitmapBG);
}

/**
 * 创建Dst图
 * @param w
 * @param h
 * @return
 */
private Bitmap createDst(int w, int h) {
    Bitmap bitDstMap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitDstMap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(0xFFFFCC44);
    canvas.drawRect(0, 0, 200, 200,paint);
    return bitDstMap;
}

/**
 * 创建Src资源图
 * @param w     宽度
 * @param h     高度
 * @return
 */
private Bitmap createSrc(int w, int h) {
    Bitmap bitSrcMap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitSrcMap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(0xFF66AAFF);
    canvas.drawRect(100, 100, 300, 300,paint);
    return bitSrcMap;
}

在上面的测试代码中，我们创建两个矩形来模拟这个叠加效果。创建一个400×400大小的Dst图像区域，然后我们绘制一个[（0,0），（200,200）]位置的矩形。同样，创建一个400×400大小的Src图像区域，然后我们绘制一个[（100,100），（300,300）]位置的矩形。然后我们将Dst和Src绘制在400×400大小底图中，这里有一个细节，为了达到比较好的展示效果，我们让Dst和Src矩形所占的“图纸”大小相同，但是图形的位置不同。谨记，PorterDuff.Mode作用于叠加部分。演示效果：

建议，最好实际拿着我上面的实例进行操作下，看看实际的效果。

4、drawCircle绘制圆形通过drawCircle进行圆形的绘制。

/**
 * 绘制圆形
 */
private void drawCircle(){
    Bitmap bitmap = Bitmap.createBitmap(800, 800, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setFilterBitmap(true);
    /**
     * 此处设置Style样式：
     * Paint.Style.STROKE：描边
     * Paint.Style.FILL：填充
     * Paint.Style.FILL_AND_STROKE：描边+填充
     */
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    paint.setColor(Color.BLUE);
    canvas.drawCircle(400, 400, 250, paint);
    iv_image.setImageBitmap(bitmap);
}

如下展示：

5、drawOval绘制椭圆

drawOval(float left, float top, float right, float bottom, Paint paint)
drawOval(RectF oval, Paint paint)

通过以上两个重载方法实现椭圆的绘制。参照一下简单的demo。

/**
 * 绘制椭圆
 */
private void drawOval(){
    Bitmap bitmap = Bitmap.createBitmap(400,400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.FILL);
    //通过指定定点坐标Rect来绘制椭圆
    //canvas.drawOval(0,0,400,400,paint);
    //通过指定RectF绘制椭圆
    RectF rectF = new RectF(0,0,400,400);
    canvas.drawOval(rectF,paint);
}

6、drawRect绘制矩形

drawRect(float left, float top, float right, float bottom, Paint paint)
drawRect(RectF rect, Paint paint)
drawRect(Rect r, Paint paint)

绘制矩形。

/**
 * 绘制矩形
 */
private void drawRect(){
    Bitmap bitmap = Bitmap.createBitmap(400,400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);

    paint.setStyle(Paint.Style.FILL);
    canvas.drawRect(0, 0, 400, 100,paint);

    canvas.translate(0,150);
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawRect(new RectF(0, 0, 399, 100),paint);

    canvas.translate(0,150);
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawRect(new Rect(0, 0, 400, 100),paint);

    iv_image.setImageBitmap(bitmap);
}

7、drawRoundRect绘制圆角矩形

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
drawRoundRect(RectF rect, float rx, float ry, Paint paint)

left、top、right、bottom：用于指定Rect的大小。
rx：x方向上圆的半径；ry：y方向上圆的半径。
paint：画笔

通过指定Rect来绘制圆角矩形。

/**
 * 绘制圆角矩形
 */
private void drawRoundRect(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.YELLOW);

    canvas.drawRoundRect(new RectF(10, 10, 300, 300),20, 20, paint);

    iv_image.setImageBitmap(bitmap);
}

8、drawPoint绘制点

drawPoint(float x, float y, Paint paint)：绘制单点操作
- x：x轴坐标
- y：y轴坐标
- paint：画笔
drawPoints(float[] pts, int offset, int count, Paint paint)：绘制一系列点
- pts：一系列的点坐标集合[x0 y0 x1 y1 x2 y2 ...]；
- offset：开头跳过的点数
- count：处理数据的个数，注意这里一个点会使用两个数据，所以最终的点数为count>>1
- paint：用来绘制点的画笔
drawPoints(float[] pts, Paint paint)：同2.

在绘制点的方法中，核心是绘制一列点的方法。每个点在当前的坐标系下以给点的x、y作为中心，它的直接通过stroke width来指定，一般默认是1px。同时点的形状通过Cap来指定、有三种类型：

Paint.Cap.BUTT：无
Paint.Cap.ROUND：圆形
Paint.Cap.SQUARE：方形

/**
 * 绘制圆点
 */
private void drawPoints(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStrokeWidth(20);
    paint.setStrokeCap(Paint.Cap.SQUARE);
    canvas.drawPoint(20, 20,paint);

    paint.setStrokeCap(Paint.Cap.ROUND);
    canvas.drawPoints(new float[]{50,50,90,90},2,2,paint);

    iv_image.setImageBitmap(bitmap);
}

9、drawLines绘制线条

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
drawLines(float[] pts, Paint paint)
drawLines(float[] pts, int offset, int count, Paint paint)

这里要注意pts参数，这个pts数组的长度要求必须是4的整数倍。绘制的顺序如下：drawLine(pts[0], pts[1], pts[2], pts[3]) 接着是：drawLine(pts[4], pts[5], pts[6], pts[7]) ，依次下去。

private void drawLines(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.GREEN);
    canvas.drawLine(10, 10, 150, 150, paint);

    paint.setColor(Color.RED);
    canvas.drawLines(new float[]{20,30,40,70,80,100,200,300},paint);
    iv_image.setImageBitmap(bitmap);
}

10、drawText绘制文本

drawText(String text, float x, float y, Paint paint)
- text：绘制文本
- x、y：绘制文本的起始坐标位置
drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
- text：绘制文本
- start：绘制文本的起始下标
- end：绘制文本的终点下标,end - 1是最后一个字符的位置。所以一般绘制到文本的结尾，直接 text.length
drawText(char[] text, int index, int count, float x, float y, Paint paint)
drawText(String text, int start, int end, float x, float y, Paint paint)
drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
- text：绘制文本
- path：文本绘制依附的路径path
- hOffset：text绘制时距离path开头处的距离
- vOffset：text绘制在path上面还是下面的距离，above < 0, below >0
drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)
drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)
- text：绘制文本
- 0<= contextStart <= start <=end <= contextEnd <= text.length
- isRtl：是否是从右往左绘制，true是；false：从左往右。
drawTextRun(char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, Paint paint)

private void createBitmapWithText(){
    Bitmap bitmap = Bitmap.createBitmap(400,400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.STROKE);
    paint.setTextSize(30);
    canvas.drawColor(Color.LTGRAY);
    //drawText(String text, float x, float y, Paint paint)
    canvas.drawText("andoter",20,20,paint);

    /**
     * drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
     * text：绘制的文本
     * start：绘制文本的起始下标
     * end：绘制文本的终点下标,end - 1是最后一个字符的位置。所以一般绘制到文本的结尾，直接
     *      text.length。
     * x、y：文本绘制的位置
     * paint：画笔
     */
    CharSequence text = "I`m an andoter";
    canvas.drawText(text, 4, text.length(), 250, 20, paint);

    /**
     * drawTextRun(CharSequence text, int start, int end, int contextStart,int contextEnd,
     *              float x, float y, boolean isRtl,Paint paint)
     *  注意：0<= contextStart <= start <=end <= contextEnd <= text.length
     *  isRtl：是否是从右往左绘制，true是；false：从左往右。
     */
    CharSequence textRun = "I`m an andoter";
    //canvas.drawTextRun(text, 0, 10, 0,text.length(),20, 60, true,paint);

    /**
     * drawTextOnPath(String text, Path path, float hOffset,float vOffset, Paint paint)
     *  text：绘制文本
     *  path：文本所依附的路径
     *  hOffset：text绘制时距离path开头处的距离
     *  vOffset：text绘制在path上面还是下面的距离，above < 0, below >0
     *  paint：画笔
     */
    Path path = new Path();
    path.addArc(new RectF(50, 50, 150, 150), -90, 180);
    //首先绘制出圆弧，突出效果
    canvas.drawPath(path,paint);
    canvas.drawTextOnPath("hello,andoter",path,0,-10,paint);

    iv_image.setImageBitmap(bitmap);
}

11、drawPath绘制path路径图形绘制path路径。这里需要熟练掌握通过path构建路径，然后绘制。一个简单的例子：

private void createBitmapWithPath(){
    Bitmap bitmap = Bitmap.createBitmap(400,400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setStrokeWidth(2);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.BLUE);

    Path path = new Path();
    path.addCircle(100,100,50, Path.Direction.CW);
    canvas.drawPath(path,paint);
    iv_image.setImageBitmap(bitmap);
}

12、drawPicture绘制Picture对象 Picture对应可用于记录我们的绘制过程，所以自然少不了canvas对它的支持。这里就不展开了。

private void createBitmapWithPicture(){
    Picture picture = new Picture();
    Canvas  canvas = picture.beginRecording(200,200);
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    canvas.drawRoundRect(new RectF(20, 20, 180, 180),5, 5, paint);
    picture.endRecording();
    iv_image.setImageDrawable(new PictureDrawable(picture));
}

通过对上面draw方法的总结，可以看出Canvas画布给我们提供了很多绘图形的类。

3、Canvas基础变换

在第二小节中，我们对于Canvas中的绘制功能有了一定初步认识。这节中，我们开始学习Canvas的基本变换操作。这里主要包含：

translate(float dx, float dy)
scale(float sx, float sy)
rotate(float degrees)
skew(float sx, float sy)

1、Canvas.translate(float dx, float dy)

dx：横坐标在X轴方向的平移距离
dy：纵坐标在Y轴方向的平移距离

在这里，我仅仅说是坐标值在X、Y轴上的平移距离，并没有说是画布的平移。这个通过下面的实例很好证明“画布Canvas的平移”这句话描述是片面的。

private void drawCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    canvas.drawColor(Color.GRAY);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.translate(100f,100f);
    canvas.drawColor(Color.YELLOW);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

如下图：

在上面代码中，我们绘制一个400×400大小的画布，同时进行平移100px。但是根据效果图来看，我们并没有发现画布的位置出现了移动，所以很容易发现，针对画布进行的translate、scale、rotate、skew仅仅是针对画布中的图形的X、Y进行对应的变换。而画布的位置、大小并没有发生改变。

通过下面一个简单的实例，看看translate的具体效果。

private void drawTranslateCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    canvas.drawColor(Color.GRAY);
    paint.setColor(Color.GREEN);
    canvas.drawCircle(100, 100, 40, paint);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.translate(100f,100f);
    canvas.drawCircle(100, 100, 40, paint);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

可以看到，两个圆之间的x和y坐标差值就是我们的平移dx、dy。即，平移是针对图形的X、Y坐标值进行平移。

2、Canvas.scale() 坐标值进行缩放

scale(float sx, float sy)
- sx：横坐标对应的缩放比例
- sy：纵坐标对应的缩放比例
scale(float sx, float sy, float px, float py)
- sx：横坐标对应的缩放比例
- sy：纵坐标对应的缩放比例
- px：横坐标缩放的中心点
- py：纵坐标缩放的中心店

1、canvas.scale(float sx, float sy)

我们可以通过查看scale的源码：

/**
 * Preconcat the current matrix with the specified scale.
 *
 * @param sx The amount to scale in X
 * @param sy The amount to scale in Y
 */
public void scale(float sx, float sy) {
    native_scale(mNativeCanvasWrapper, sx, sy);
}

通过上面的注释，我们可以看到sx、sy指的是X、Y的缩放比例，这里并没有指定是Canvas画布进行缩放。通过下面的一个简单例子可以发现：

private void drawScaleCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.scale(0.5f, 0.5f);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

2、scale(float sx, float sy, float px, float py)

/**
 * Preconcat the current matrix with the specified scale.
 *
 * @param sx The amount to scale in X
 * @param sy The amount to scale in Y
 * @param px The x-coord for the pivot point (unchanged by the scale)
 * @param py The y-coord for the pivot point (unchanged by the scale)
 */
public final void scale(float sx, float sy, float px, float py) {
    translate(px, py);
    scale(sx, sy);
    translate(-px, -py);
}

通过上面可以看到scale(sx,sy,px,py)的执行过程，是先进行平移px,py，然后在进行按照sx、sy的比例进行缩放，最后在平移回去。通过对过程的精简，即等价于：

public final void scale(float sx, float sy, float px, float py) {
    translate(px- sx*px, py - sy*py);
    scale(sx, sy);
}

我们通过一个简单的例子来观察下：

private void drawScaleCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.scale(0.5f, 0.5f, 100, 100);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

3、Canvas.rotate坐标值进行旋转

1、rotate(float degrees)

将canvas中绘制图形进行旋转角度degree。

private void drawRotateCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.rotate(30);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

2、rotate(float degrees, float px, float py)

查看源码：

/**
 * Preconcat the current matrix with the specified rotation.
 *
 * @param degrees The amount to rotate, in degrees
 * @param px The x-coord for the pivot point (unchanged by the rotation)
 * @param py The y-coord for the pivot point (unchanged by the rotation)
 */
public final void rotate(float degrees, float px, float py) {
    translate(px, py);
    rotate(degrees);
    translate(-px, -py);
}

我们可以看到，执行的过程是跟scale的重载方法执行过程是相同的。起始就是以点(px,py)作为旋转中心，旋转degrees角度。

private void drawRotateCanvas(){
    Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);

    canvas.save();
    paint.setColor(Color.BLUE);
    canvas.rotate(30, 100, 100);
    canvas.drawRect(new Rect(0, 0, 400, 400), paint);
    canvas.restore();

    iv_image.setImageBitmap(bitmap);
}

4、Canvas.skew() 坐标值进行错切

3、Canvas画布图层操作

在上面的基本图层操作中，我们对canvas的图层操作有了初次见面，下面我们看看基本的图层操作包含哪些。

save
saveLayer
saveLayerAlpha
restore
getSaveCount
restoreToCount

以上几个方法，可以归结为两类，一类是保存Canvas信息，另外一类是恢复Canvas保存信息。

1、cavnas.save()

/**
 * Saves the current matrix and clip onto a private stack.
 * <p>
 * Subsequent calls to translate,scale,rotate,skew,concat or clipRect,
 * clipPath will all operate as usual, but when the balancing call to
 * restore() is made, those calls will be forgotten, and the settings that
 * existed before the save() will be reinstated.
 *
 * @return The value to pass to restoreToCount() to balance this save()
 */
public int save() {
    return native_save(mNativeCanvasWrapper, MATRIX_SAVE_FLAG | CLIP_SAVE_FLAG);
}

通过源码的了解，我们可以得知save方法用于单独保存当前的matrix和clip信息。当我们调用save方法之后，我们调用canvas的translate、scale、rotate、skew、clipXX类的Canvas变换操作的时候，当吊起restore方法的时候，这些操作都会舍弃，重新恢复到save之前的状态。

关于save方法的实例，我们可以参照之前的Cavnas变换的相关操作。

2、save(int saveFlags)

/**
 * Based on saveFlags, can save the current matrix and clip onto a private
 * stack.
 * <p class="note"><strong>Note:</strong> if possible, use the
 * parameter-less save(). It is simpler and faster than individually
 * disabling the saving of matrix or clip with this method.
 * <p>
 * Subsequent calls to translate,scale,rotate,skew,concat or clipRect,
 * clipPath will all operate as usual, but when the balancing call to
 * restore() is made, those calls will be forgotten, and the settings that
 * existed before the save() will be reinstated.
 *
 * @param saveFlags flag bits that specify which parts of the Canvas state
 *                  to save/restore
 * @return The value to pass to restoreToCount() to balance this save()
 */
public int save(@Saveflags int saveFlags) {
    return native_save(mNativeCanvasWrapper, saveFlags);
}

从上面的源码中可以看出，根据指定的saveFlag进行保存当前图层的信息。同样当调用save方法之后，调用Canvas的变换操作，我们在调用restore方法，就会设置我们所做的变换操作，恢复到save之前的状态。这里，可以通过指定saveFlag的值来保存Canvas的属性。

MATRIX_SAVE_FLAG：保存对应的matrix信息
CLIP_SAVE_FLAG：保存clip裁剪信息
HAS_ALPHA_LAYER_SAVE_FLAG：保存Alpha信息
FULL_COLOR_LAYER_SAVE_FLAG：保存颜色信息
CLIP_TO_LAYER_SAVE_FLAG,：保存Clip裁剪信息
ALL_SAVE_FLAG：保存所有信息

3、saveLayer

保存图层信息系列方法。saveLayer方法与save方法有些类似，但是区别在于saveLayer方法在一个“离屏”bitmap对象上进行绘制。saveLayer可以为canvas创建一个新的透明图层，在新的图层上绘制，并不会直接绘制到屏幕上，而会在restore之后，绘制到上一个图层或者屏幕上（如果没有上一个图层）。为什么会需要一个新的图层，例如在处理xfermode的时候，原canvas上的图（包括背景）会影响src和dst的合成，这个时候，使用一个新的透明图层是一个很好的选择。对PS有点了解的我们可以想象下图层的概念。

4、restore

恢复Canvas到上一次调用save之前的状态。注意，resotre方法调用的次数不能大于save调用的次数。

5、getSaveCount

获取Canvas单独栈中所做的Matrix和Clip操作的次数。与调用的save次数或restore次数相同。

6、restoreToCount(int saveCount)

快速回退到某次save的操作。注意saveCount值不能小于1.

int count = canvas.save();
... // more calls potentially to save()
canvas.restoreToCount(count);
// now the canvas is back in the same state it was before the initial
// call to save().

至此，对Canvas的基本使用有了初步的介绍。