前言

Android 中的Canvas相当于是画布,通过画笔绘制几何图形,文本,路径和位图等;

常用Api分类:

绘制

变换

状态保存/恢复

简单看下第一种分类,不做重点介绍

绘制相关

void drawText(String text,int start, int end,Paint paint) //指定坐标 绘制文字

void drawPoint(float x, float y,Paint paint) //指定坐标 绘制点

void drawLine(float startX, float startY,float endX, float endY,Paint paint) //指定起始点,结束点 绘制连线

void drawPath(Path path,Paint paint) //指定path 绘制连线

void drawBitmap(Bitmap bitmap,float left,float top,Paint paint) //指定坐标,绘制位图

void drawCircle(float cx, float cy, float radius, Paint paint) //绘制圆形

void drawRect(RectF rect,Paint paint) //绘制矩形

等等等...

位置/形状 变换相关

void translate(float dx, float dy) //平移操作

void scale(float sx, float sy) //缩放操作

void rotate(float degrees) //旋转操作

void skew(float sx, float sy) //倾斜操作

void clipXxx(...) //切割操作,参数指定区域内可以正常(继续)绘制

void clipOutXxx(...) //反向切割操作,参数指定区域内不可以正常(继续)绘制

void setMatrix(Matrix matrix) :可通过matrix实现平移,缩放,旋转等操作

translate(float dx, float dy)平移操作,操作画布平移,相当于绘制的参考点坐标平移,从坐标系的角度来说比较简单,直接看图:

translate(float dx, float dy)

scale(float sx, float sy) 缩放操作,传入x,y方向的缩放比例,我们看下缩放前后对比(红色矩形为缩放前绘制,灰色矩形为缩放后绘制):

canvas.drawRect(200,200, 700,700, mPaint);

canvas.scale(0.5f, 0.5f);

mPaint.setColor(Color.GRAY);

canvas.drawRect(200,200, 700,700, mPaint);

scale(float sx, float sy)

scale(float sx, float sy) 操作对整个画布缩放操作,所以缩放后的绘制的矩形对比之前的,位置和大小都发生了变化,缩放操作还有个重载方法,需要四个参数void scale(float sx, float sy, float px, float py),我们看下前后对比

canvas.drawRect(200,200, 700,700, mPaint);

//先translate(px, py),再scale(sx, sy),再反向translate(px, py)

canvas.scale(0.5f, 0.5f,200,200);

mPaint.setColor(Color.GRAY);

canvas.drawRect(200,200, 700,700, mPaint);

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

上述canvas.scale(0.5f, 0.5f,200,200)操作相当于一下三行代码:

//先translate(px, py)

canvas.translate(200, 200);

//再scale(sx, sy)

canvas.scale(0.5f, 0.5f);

//再反向translate(px, py)

canvas.translate(-200, -200);

rotate(float degrees) 旋转操作

还有一个重载方法:

void rotate(float degrees, float px, float py) //px, py表示旋转中心的坐标

默认顺时针旋转,直接看图:

canvas.drawRect(400, 400, 900, 900, mPaint);

canvas.rotate(45, 650, 650); //px, py表示旋转中心的坐标

mPaint.setColor(Color.GRAY);

canvas.drawRect(400, 400, 900, 900, mPaint);

rotate(float degrees, float px, float py)

void skew(float sx, float sy) 倾斜操作参数分别表示x,y方向倾斜的角度的tan值

canvas.drawRect(0,0, 400, 400, mPaint);

canvas.skew(1, 0); //在X方向倾斜45度,相当于Y轴逆时针旋转45

mPaint.setColor(Color.GRAY);

canvas.drawRect(0, 0, 400, 400, mPaint);

canvas.skew(1, 0)

如果在y方向倾斜45度的话

canvas.skew(0, 1); //在y方向倾斜45度， 相当于X轴顺时针旋转45

canvas.skew(0, 1)

void clipXxx(...) //切割操作,参数指定区域内可以正常(继续)绘制,不在赘述

void clipOutXxx(...) //反向切割操作,参数指定区域内不可以正常(继续)绘制,不在赘述

void setMatrix(Matrix matrix) 矩阵

Matrix类里面封装了一系列的api,比如:

Matrix matrix = new Matrix();

matrix.setTranslate(50,50);//平移

matrix.setRotate(45);//旋转

matrix.setScale(0.5f, 0.5f);//酸防

canvas.setMatrix(matrix);

canvas.drawRect(0,0,700,700, mPaint);

状态保存和恢复

调用了translate,scale,rotate,skew,clipRect等变换后，后续的操作都是基于

变换后的Canvas,都会受到影响，对于后续的操作很不方便。Canvas提供 了save, saveLayer, saveLayerAlpha, restore,restore ToCount来保存和恢复状态。

Canvas 的save()和restore()可以多次调用,Canvas内部维护了一个状态栈,每次save()操作会将当前状态压栈,每次restore()操作会将最上面的状态出栈,恢复到上次保存的状态

状态栈

我们也可以调用canvas.getSaveCount()获取当前保存的状态数,不进行任何的save()操作,getSaveCount()默认为1,调用canvas.getSaveCount()恢复到指定状态,参数为save()操作返回的int值

int state = canvas.save(); //保存状态1

Log.e("TAG", "onDraw: " + canvas.getSaveCount());

canvas.translate(70, 50);

canvas.drawRect(0, 0, 400, 400, mPaint);

canvas.save(); //保存状态2

canvas.restore(); //返回最新状态(状态2)

Log.e("TAG", "onDraw: " + canvas.getSaveCount());

mPaint.setColor(Color.BLUE);

canvas.drawRect(0, 0, 400, 400, mPaint);

canvas.restoreToCount(state);//手动指定的返回到状态1

Canvas的总结就到这里,使用Canvas实现小案例见: