1. Canvas类
Canvas
主要用于2D绘图,它提供了很多相应的drawXxx()
方法,Canvas
的获取方式有三种
- 重写
View
的onDraw(Canvas)
方法@Override protected void onDraw(Canvas canvas) { }
SurfaceView
通过lockCanvas()
方法获取Canvas
@Override public void surfaceCreated(SurfaceHolder holder) { Canvas canvas = holder.lockCanvas(); holder.unlockCanvasAndPost(canvas); }
- 通过
Canvas(Bitmap)
或setBitmap(Bitmap)
自定义Canvas
Bitmap bitmap = Bitmap.createBitmap(600, 800, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap);
2. 常用方法
绘制背景
// a为透明度,`r`,`g`,`b`代表颜色值
drawARGB(int a, int r, int g, int b)
drawColor(int color)
drawRGB(int r, int g, int b)
绘制点
// 根据给定的坐标,绘制点
drawPoint(float x, float y, Paint)
// 两个一组组成坐标,pts必须是二的倍数
drawPoints(float[] pts, Paint)
// offset是起始,count是数量,必须是二的倍数
drawPoints(float[] pts, int offset, int count, Paint)
绘制线,线由两个点连接而成
// 根据给定的坐标,绘制线
drawLine(float, float, float, float, Paint)
// 四个一组组成连线,pts必须是四的倍数
drawLines(float[] pts, Paint)
// offset是起始,count是数量,必须是四的倍数
drawLines(float[] pts, int offset, int count, Paint)
绘制矩形和圆角矩阵
// 绘制矩形,rect指定左右上下
drawRect(Rect rect, Paint)
drawRect(RectF, Paint)
drawRect(float, float, float, float, Paint)
// 绘制圆角矩形,rx是横向,ry是纵向
drawRoundRect(RectF, float rx, float ry, Paint)
drawRoundRect(float, float, float, float, float, float, Paint)
绘制椭圆
// 绘制椭圆,rect指定左右上下
drawOval(RectF rect, Paint)
drawOval(float, float, float, float, Paint)
绘制圆
// cx和cy是圆的中心,radius是圆的半径
drawCircle(float cx, float cy, float radius, Paint)
绘制弧形
// startAngle是圆弧开始角度,sweepAngle是圆弧经过的角度,useCenter设置圆弧是否经过中心
drawArc(RectF, float startAngle, float sweepAngle, boolean useCenter, Paint)
drawArc(float, float, float, float, float, float, boolean, Paint)
有两种不同Paint
,设置了不同的Color
和Style
mRedPaint = new Paint();
mRedPaint.setColor(Color.RED);
mRedPaint.setStyle(Paint.Style.STROKE);
mRedPaint.setStrokeWidth(5);
mBluePaint = new Paint();
mBluePaint.setColor(Color.BLUE);
mBluePaint.setStyle(Paint.Style.FILL_AND_STROKE);
mBluePaint.setStrokeWidth(10);
示例代码
canvas.drawPoint(100, 50, mRedPaint);
float[] pts = new float[]{100, 75, 150, 100, 200, 125};
canvas.drawPoints(pts, mBluePaint);
canvas.drawLine(100, 200, 400, 200, mRedPaint);
pts = new float[]{100, 250, 400, 250,
400, 250, 250, 450,
250, 450, 100, 250};
canvas.drawLines(pts, mBluePaint);
canvas.drawRect(100, 500, 300, 600, mRedPaint);
canvas.drawRect(400, 500, 600, 600, mBluePaint);
canvas.drawRoundRect(100, 650, 300, 750, 40, 20, mRedPaint);
canvas.drawRoundRect(400, 650, 600, 750, 40, 20, mBluePaint);
canvas.drawOval(100, 800, 300, 900, mRedPaint);
canvas.drawOval(400, 800, 600, 900, mBluePaint);
canvas.drawCircle(200, 1000, 50, mRedPaint);
canvas.drawCircle(500, 1000, 50, mBluePaint);
canvas.drawArc(100, 1100, 300, 1200, 45, 225, false, mRedPaint);
canvas.drawArc(400, 1100, 600, 1200, 45, 225, true, mRedPaint);
canvas.drawArc(100, 1250, 300, 1350, 45, 225, false, mBluePaint);
canvas.drawArc(400, 1250, 600, 1350, 45, 225, true, mBluePaint);
效果如下
3. 绘制字符
基础绘制字符方法,y
是基线,详见Android FontMetrics类
// x, y 为起始位置
drawText(String text, float x, float y, Paint)
drawText(String text, int start, int end, float x, float y, Paint)
drawText(CharSequence text, int start, int end, float x, float y, Paint)
drawText(char[] text, int index, int count, float x, float y, Paint)
start
设置为2,end
设置为14,效果如下
设置Paint
可以实现不同的样式,详情可见Android Paint类
沿路径绘制
// hOffset与路径起始点的水平偏移距离,vOffset与路径中心点的垂直偏移量
drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint)
drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint)
Path
是一条斜线,hOffset
为80,vOffset
为20,效果如下
4. save()和restore()方法
save()
方法将当前Canvas
状态进行保存,调用restore()
方法后,会将Canvas
还原成最近的一个save()
的状态。
save()
方法会有一个返回值,可以调用restoreToCount(int saveCount)
方法,将Canvas
还原成某一个特定的save()
状态。
5. clipPath(Path)方法
clipPath(Path)
和clipPath(Path, Region.Op)
方法按所定义的路线剪裁,Region.Op
参数
DIFFERENCE
剪裁出差异的部分INTERSECT
剪裁出相交的部分UNION
剪裁出合并的部分XOR
,与INTERSECT刚好相反REVERSE_DIFFERENCE
,与DIFFERENCE相反REPLACE
,后面覆盖前面
示例代码
private void drawClipPath(Canvas canvas, float dx, float dy, Region.Op op) {
canvas.save();
canvas.translate(dx, dy);
Path path1 = new Path();
path1.addCircle(150, 100, 75, Path.Direction.CW);
canvas.clipPath(path1);
Path path2 = new Path();
path2.addCircle(250, 100, 75, Path.Direction.CW);
canvas.clipPath(path2, op);
canvas.drawColor(Color.RED);
canvas.restore();
}
效果如下
6. 位移操作
平移操作
translate(float dx, float dy)
示例代码
canvas.drawRect(rect, mRedPaint);
canvas.translate(50, 50);
canvas.drawRect(rect, mBluePaint);
旋转操作
// 以(0, 0)为原点,旋转
rotate(float degrees)
// 以(px, py)为原点,旋转
rotate(float degrees, float px, float py)
示例代码
canvas.drawRect(rect, mRedPaint);
canvas.rotate(45);
canvas.drawRect(rect, mBluePaint);
canvas.rotate(90, 125, 50);
canvas.drawRect(rect, mGreenPaint);
偏离操作
skew(float sx, float sy)
示例代码
canvas.drawRect(rect, mRedPaint);
canvas.skew(1, 0);
canvas.drawRect(rect, mBluePaint);
canvas.skew(0, 1);
canvas.drawRect(rect, mGreenPaint);
缩放操作
scale(float sx, float sy)
scale(float sx, float sy, float px, float py)
示例代码
canvas.drawRect(rect, mRedPaint);
canvas.scale(0.5f, 2f);
canvas.drawRect(rect, mBluePaint);
效果如下