五幅图学会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的旋转而旋转。