五幅图学会Android(安卓)Canvas的坐标系变换(rotate translate scale)
在写公司项目的时候,需要画一个垂直的SeekBar,一开始就是简单的在xml文件里面,添加了android:rotate="-90"这个配置,不过后面发现很多问题。最后网上查资料,使用了Canvas.rotate()和Canvas.translate()的结合,实现了垂直的SeekBar布局。
一.Canvas的坐标系介绍
一般来讲,一个自定义view的canvas的显示区域就是View的区域,大小就是width*height。
@Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); Paint p = new Paint(); p.setColor(getResources().getColor(R.color.yellow)); canvas.drawRect(0, 0, 200, 100, p); }
Canvas的坐标系的顶点在左上角(0,0)的位置,X轴向右,Y轴向下为正方向。
二.Canvas的rotate(), translate(), scale()等方法介绍
1.Canvas.rotate()
这两幅图可以看出,canvas.rotate(90)和canvas.rotate(-90)之后图形的样子。但是需要注意的是,不过经过什么变换,显示区域还是原来canvas的区域,所以这样变换在屏幕上将会什么都看不到。
2.Canvas.translate()
经过canvas.translate(100,100)的变换后,整个canvas向x和y正方向移动了100的距离。
canvas.translate(-100,-100)就是向X和Y的负方向移动100,这样Rect就有一部分不在可视范围内了。
3.Canvas.scale()
上左图是经过canvas.scale(0.5f,0.5f)之后得到的图形,可以看到canvas以及上面的Rect都的width和height都变为一半。
上有图是经过canvas.scale(2f,2f)之后得到的图形,可以看到canvas以及上面的Rect都的width和height都变为原来的一倍,还可以看到Rect已经有一部分超出可视范围,超出部分是看不到的。
三.水平SeekBar变成垂直SeekBar
如上图所示,经过canvas.rotate(-90)和canvas.translate(-200, 0)就可以使水平的SeekBar变成垂直的。translate位移的时候需要注意,由于坐标系的改变,所以是canvas.translate(-200, 0)而不是canvas.translate(0, 200)。
这里其实最需要注意的是经过rotate()变换之后的坐标轴的位置,坐标轴也会随着canvas的旋转而旋转。
更多相关文章
- 十一、Android坐标系
- Android(安卓)Nine-patch
- Android(安卓)Drawable Resources系列2:标签、.9.png图片制作
- android自定义checkBox的样式
- Android(安卓)View体系总结
- 在自己的项目中引入Material design设计风格
- 代码生涯的第一个开源库 刘海屏适配
- Android之 .9.png 篇
- Android(安卓)笔记38: BAIDU MAP API GPS数据定位偏移校正