自定义View Canvas详解(上)

本章节讲述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