Android之玩转View(七):Canvas的坐标变换
请尊重原创,转载请注明出处【tianyl】的博客
1. 前言
前面简单描述了一下Canvas的基础用法,还有一个和Canvas不怎么相关的Region,接下来,就通过一个例子简单说说Canvas中的坐标变换(也就是常见的平移、旋转、缩放等)和坐标变换中使用到的save和restore。
2. Canvas变换
说到Canvas的变换,首先就要介绍Canvas的坐标系,再使用Canvas时,我们要知道2个坐标系,一个是Canvas的坐标系,一个是绘图的坐标系。
- Canvas坐标系
我们知道,Android系统中有一个坐标系,它以屏幕的左上角为原点,向右为X轴正半轴,向下为Y轴正半轴,出了Android系统的坐标系,对于一个Canvas,它也有自己的坐标系,原点就是View的左上角,从坐标原点往右是X轴正半轴,往下是Y轴的正半轴,有且仅有一个,它是唯一不变的。
- 绘图坐标系
在使用Canvas时,除了需要知道Canvas坐标系,还需要知道绘图坐标系,当然绘图坐标系它是可变的,它和Canvas的Matrix相关,Matrix改变时,绘图坐标系会对应的改变,这个过程不可逆,但是可以通过save和restore来进行操作,Matrix又是通过translate(平移)、rotate(旋转)、scale(缩放)和skew(错切)来修改。
Canvas的坐标3. Canvas的save和saveLayer
介绍完Canvas的坐标系,接下来说说一般情况下这些坐标系的用法。
-
save
之前说了,Canvas的坐标系是可以通过平移旋转进行改变的,所以当我们想要有平移前的状态和平移后的状态,那么我们可以通过save来将这两种状态保存起来,而save保存的状态可以用restore恢复,当然,save和restore相当于是一次入栈和出栈的操作,一次save对应一次restore。 -
saveLayer
说完了save,再来说说saveLayer,saveLayer从方法字面意思看,就是保存一个图层,它其实和PS里的图层.
4. 例子
下面就通过一个简单例子,来对Canvas的坐标变换进行说明.
//先通过canvas.translate操作Canvas的绘图坐标系,操作操作后的绘图坐标系原点处于操作前(100,100)的位置
canvas.translate(100, 100);
mPaint.setColor(Color.BLUE);
//以坐标(100,100)的位置为原点,绘制一个半径100的圆,因为坐标系已经平移过了,所以这个原点其实是没平移前的(200,200)
canvas.drawCircle(100, 100, 100, mPaint);
canvas.save();
mPaint.setColor(Color.YELLOW);
canvas.drawCircle(200, 200, 100, mPaint);
//再次平移
canvas.translate(400, 0);
mPaint.setColor(Color.BLUE);
canvas.drawCircle(100, 100, 100, mPaint);
//这里使用了saveLayer,并且传入的参数0x7f其实是50%的透明度,也就是对接下来要入栈了一个图层,并且之后在这个图层上画的图像,进行了半透明的处理
canvas.saveLayerAlpha(0, 0, 300, 300, 0x7f, Canvas.ALL_SAVE_FLAG);
mPaint.setColor(Color.YELLOW);
canvas.drawCircle(200, 200, 100, mPaint);
canvas.restore();
canvas.restore();
具体效果如下:
效果图
左边的是使用save的效果,右边的是使用saveLayer的效果,这个方法就是在我们绘制图像的时候,可以绘制在多个图层上,然后针对不同的图层实现自己想要的效果。
5. 结尾
关于Canvas的的各种变换效果,因为网上已经很很多例子了,所以本着不重复造轮子的精神,这里仅对这些效果进行概括性的说明。