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

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

一.Canvas的坐标系介绍

通常来说，一个自定义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()

                

 

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

2.Canvas.translate()

                      

 

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

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

3.Canvas.scale()

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

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

三.水平SeekBar变成垂直SeekBar

              

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

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