本章节讲述Canvas(画布)的translate(平移),scale(缩放),rotate(旋转),skew(倾斜) 以及save(),restore()。
一.translate(平移)
方法:translate(float dx, float dy)。
作用:平移,将画布的坐标原点向左右方向移动x,向上下方向移动y,canvas默认位置在(0,0)。
参数:dx为水平方向的移动距离,dy为垂直方向的移动距离。
代码
for(int i=0; i < 5; i++) {
canvas.drawCircle(50, 50, 50, paint);
canvas.translate(100, 100);
}
效果
二.rotate(旋转)
方法:rotate(float degrees) / rotate(float degrees, float px, float py)
作用:围绕坐标原点旋转degrees度,值为正顺时针。
参数:degrees为旋转角度,px和py为指定旋转的中心点坐标(px,py)。
代码
Rect rect = new Rect(50,0,150,50);
canvas.translate(200, 200);//canvas的坐标原点移向了(200,200)
for(int i = 0; i < 100;i++){
canvas.rotate(10);
canvas.drawRect(rect, paint);
}
效果
三.scale(缩放)
方法:scale(float sx, float sy) / scale(float sx, float sy, float px, float py)。
作用:对画布进行缩放。
参数:sx为水平方向缩放比例,sy为竖直方向的缩放比例,px和py不详,小数为缩小, 整数为放大。
代码
canvas.drawRect(20, getHeight()/4, getWidth()-20, getHeight()/4*2, paint);//画矩形
canvas.scale(0.8f, 0.8f);
canvas.drawRect(20, getHeight()/4, getWidth()-20, getHeight()/4*2, paint1);//画矩形
canvas.scale(2f, 2f);
canvas.drawRect(20, getHeight()/4, getWidth()-20, getHeight()/4*2, paint2);//画矩形
解释
效果
四.skew(倾斜)
方法:skew(float sx, float sy)。
作用:倾斜,也可以译作斜切,扭曲。
参数:sx为x轴方向上倾斜的对应角度,sy为y轴方向上倾斜的对应角度,两个值都是tan值 比如要在x轴方向上倾斜60度,那么小数值对应:tan 60 = 根号3 = 1.732
代码
canvas.drawRect(20, getHeight()/4*2, getWidth()-20, getHeight()/4*3, paint);//画矩形
canvas.skew(0.1f,-0.5f);
canvas.drawRect(20, getHeight()/4, getWidth()-20, getHeight()/4*2, paint1);//画矩形
解释
效果
五.Canvas图层的以及save()和restore()方法详解
我们一般喜欢称呼Canvas为画布,这里可以想象Canvas就是一张简单的画纸,那么多层的动画是怎么用canvas来完成的呢。
图解
当
我们调用save()方法,会保存当前Canvas的状态然后作为一个Layer(图层),添加到Canvas栈中, 另外,这个Layer(图层)不是一个具体的类,就是一个概念性的东西而已。
而当我们调用restore()方法的时候,会恢复之前Canvas的状态,而此时Canvas的图层栈 会弹出栈顶的那个Layer,后继的Layer来到栈顶,此时的Canvas回复到此栈顶时保存的Canvas状态。
简单说就是:save()往栈压入一个Layer,restore()弹出栈顶的一个Layer,这个Layer代表Canvas的状态。也就是说可以save()多次,也可以restore()多次,但是restore的调用次数不能大于save 否则会引发错误。
代码实现
//1.画一个圆并保存
canvas.drawCircle(50, 50, 50, paint);
canvas.save();
//2.平移(100,100)再画一个圆并保存
canvas.translate(100, 100);
canvas.drawCircle(50, 50, 50, paint1);
canvas.save();
效果
再在上面代码加如下代码
//恢复然后画第三个圆
canvas.restore();
canvas.drawCircle(50, 50, 50, paint2);
效果
附:Canvas官方链接
http://androiddoc.qiniudn.com/reference/android/graphics/Canvas.html