本篇分为两大部分介绍Canvas画布,第一部分是Canvas的api使用部分,第二部分是Canvas的实例加图解部分
(一)Canvas的api详解
(一)辅助api
1) Canvas平移
/**
* 画布向(100,50)方向平移
*
* 参数1: 向X轴方向移动100距离
* 参数2: 向Y轴方向移动50距离
*/
canvas.translate(100, 50);
2)Canvas缩放
/**
* 在X轴方向放大为原来2倍,Y轴方向方大为原来的4倍
* 参数1: X轴的放大倍数
* 参数2: Y轴的放大倍数
*/
canvas.scale(2, 4);
/**
* 在X轴方向放大为原来2倍,Y轴方向方大为原来的4倍
* 参数1: X轴的放大倍数
* 参数2: Y轴的放大倍数
* 参数3: 原点X坐标
* 参数4: 原点Y坐标
*/
canvas.scale(2, 4,100,100);
3)Canvas旋转
/**
* 原点为中心,旋转30度(顺时针方向为正方向 )
* 参数: 旋转角度
*/
canvas.rotate(30);
/**
* 以(100,100)为中心,旋转30度,顺时针方向为正方向
* 参数: 旋转角度
*/
canvas.rotate(30,100,100);
4)Canvas保存和还原
Canvas提供了几个方法,让我们可以方便的对Canvas的状态进行更改和还原。
这些方法是:save()、restore()、restoreToCount(int saveCount)。
我们在对Canvas进行平移、旋转、放大等操作时候,可以调用save()方法,将当前修改过的Canvas状态进行保存,
调用restore() 方法后,会将Canvas还原成最近的一个save() 的状态。
save()方法还会有一个返回值,我们也可以调用restoreToCount(int saveCount)方法,将这个返回值作为参数传递进去,
就可以将Canvas还原成某一个特定的save()状态。列:
canvas.translate(100,100); // 平移(100,100)
int save1 = canvas.save(); // 保存Canvas状态(状态1)
canvas.scale(2, 2); // 放大2倍
int save2 = canvas.save(); // 保存Canvas状态(状态2)
canvas.restore(); // 返回最新的save状态,即状态2
canvas.restoreToCount(save1);// 手动指定的返回到 状态1
(二)绘制图形
1) 绘制圆形:drawCircle(float cx, float cy, float radius, Paint paint)
cx: 圆心的x坐标
cy: 圆心的y坐标
radius: 圆的半径
paint: 绘制风格
2) 绘制矩形:drawRect(float left, float top, float right, float bottom, Paint paint) / drawRect(RectF rect, Paint paint)
left: 矩形left的x坐标
top: 矩形top的y坐标
right: 矩形right的x坐标
bottom: 矩形bottom的y坐标
paint: 绘制风格
3) 绘制圆角矩形: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: 图形left的x坐标
top: 图形top的y坐标
right: 图形right的x坐标
bottom: 图形bottom的y坐标
rx: x方向的圆角半径
ry: y方向的圆角半径
paint: 绘制风格
4) 绘制椭圆:drawOval(float left, float top, float right, float bottom, Paint paint)
left: 图形left的x坐标
top: 图形top的y坐标
right: 图形right的x坐标
bottom: 图形bottom的y坐标
paint: 绘制风格
5) 绘制弧:drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
oval: 指定圆弧的外轮廓矩形区域
startAngle: 圆弧起始角度,单位为度
sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度
useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形
paint: 绘制风格
6)绘制文字:drawText(String text, float x, float y, Paint paint)
text: 文本
x: 文本origin的x坐标
y: 文本baseline的y坐标
paint: 绘制风格