0
点赞
收藏
分享

微信扫一扫

五幅图学会Android Canvas的坐标系变换(rotate translate scale)


在写公司项目的时候,须要画一个垂直的SeekBar,一开始就是简单的在xml文件里面,添加了android:rotate="-90"这个配置,不事后面发现不少问题。最后网上查资料,使用了Canvas.rotate()和Canvas.translate()的结合,实现了垂直的SeekBar布局。android

一.Canvas的坐标系介绍

五幅图学会Android Canvas的坐标系变换(rotate translate scale)_ide

通常来说,一个自定义view的canvas的显示区域就是View的区域,大小就是width*height。canvas

@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轴向下为正方向。ide

二.Canvas的rotate(), translate(), scale()等方法介绍

1.Canvas.rotate()

               

五幅图学会Android Canvas的坐标系变换(rotate translate scale)_android_02

 

 

这两幅图能够看出,canvas.rotate(90)和canvas.rotate(-90)以后图形的样子。可是须要注意的是,不过通过什么变换,显示区域仍是原来canvas的区域,因此这样变换在屏幕上将会什么都看不到。布局

2.Canvas.translate()

                      

五幅图学会Android Canvas的坐标系变换(rotate translate scale)_动画_03

 

通过canvas.translate(100,100)的变换后,整个canvas向x和y正方向移动了100的距离。spa

canvas.translate(-100,-100)就是向X和Y的负方向移动100,这样Rect就有一部分不在可视范围内了。code

3.Canvas.scale()

五幅图学会Android Canvas的坐标系变换(rotate translate scale)_android_04

上左图是通过canvas.scale(0.5f,0.5f)以后获得的图形,能够看到canvas以及上面的Rect都的width和height都变为一半。xml

上有图是通过canvas.scale(2f,2f)以后获得的图形,能够看到canvas以及上面的Rect都的width和height都变为原来的一倍,还能够看到Rect已经有一部分超出可视范围,超出部分是看不到的。blog

三.水平SeekBar变成垂直SeekBar

五幅图学会Android Canvas的坐标系变换(rotate translate scale)_ide_05

              

如上图所示,通过canvas.rotate(-90)和canvas.translate(-200, 0)就能够使水平的SeekBar变成垂直的。translate位移的时候须要注意,因为坐标系的改变,因此是canvas.translate(-200, 0)而不是canvas.translate(0, 200)。get

这里其实最须要注意的是通过rotate()变换以后的坐标轴的位置,坐标轴也会随着canvas的旋转而旋转。class

举报

相关推荐

0 条评论