天天看点

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

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

一.Canvas的坐标系介绍

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

一般来讲,一个自定义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()

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

这两幅图可以看出,canvas.rotate(90)和canvas.rotate(-90)之后图形的样子。但是需要注意的是,不过经过什么变换,显示区域还是原来canvas的区域,所以这样变换在屏幕上将会什么都看不到。

2.Canvas.translate()

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

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

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

3.Canvas.scale()

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

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

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

三.水平SeekBar变成垂直SeekBar

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

如上图所示,经过canvas.rotate(-90)和canvas.translate(-200, 0)就可以使水平的SeekBar变成垂直的。translate位移的时候需要注意,由于坐标系的改变,所以是canvas.translate(-200, 0)而不是canvas.translate(0, 200)。

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