自定义 View 之 Canvas 几何变化

我们可以使用 View 对象的 setXXX 方法来对一个 View 进行位移、渐变、旋转等等操作，Canvas 同样也提供了相应的方法来帮助我们操作绘制图像。

Canvas.XXXX

• translate(float dx, float dy)：画布位移。两个参数分别是 X/Y 轴方向的位移距离。
• rotate(float degrees)：画布旋转，其参数为旋转角度。
• rotate(float degrees, float px, float py)：画布旋转，后两个参数是旋转轴坐标。
• scale(float sx, float sy)：画布缩放，参数分别为 X/Y 轴的缩放因子程度，例如缩小一半，则为 0.5f
• scale(float sx, float sy, float px, float py)：画布缩放，后两个参数为缩放的基准点。
• skew(float sx, float sy)：画布错切，两个参数分别为 X/Y 方向的错切系数。

示例：
位移

        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.translate(100, 200);
        paint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, 500, 500, paint);

显示如下：

旋转

        canvas.save();//保存画布
        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.rotate(30);  //以(0,0)为原点旋转30°
        paint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.restore();//恢复画布
        canvas.rotate(120, 500, 500);//以(500,500)为原点旋转120°
        canvas.drawRect(0, 0, 500, 500, paint);

显示如下：

缩放

        canvas.save();//保存画布
        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.scale(2, 2);//画布 X/Y 方向均扩大2倍
        paint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.restore();//恢复画布
        canvas.scale(2, 2, 300, 300);//以(300,300)为基准点，画布 X/Y 方向均扩大2倍
        paint.setColor(Color.GREEN);
        canvas.drawRect(0, 0, 500, 500, paint);

显示如下：

错切

        canvas.save();//保存画布
        canvas.drawRect(0, 0, 500, 500, paint);
        canvas.skew(0, 0.5f);   //Y方向错切0.5
        paint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, 510, 510, paint);
        canvas.restore();//恢复画布
        canvas.save();//再次保存画布
        canvas.skew(0.5f, 0);//X方向错切0.5
        paint.setColor(Color.GREEN);
        canvas.drawRect(0, 0, 510, 510, paint);
        canvas.restore();//恢复画布
        paint.setColor(Color.GRAY);
        canvas.skew(0.5f, 0.5f);//XY轴方向均错切0.5
        canvas.drawRect(0, 0, 510, 510, paint);

显示如下：

需要注意，我们所做的几何变换，都是针对“画布”，而不是“图形”。

save 和 restore 究竟是干啥的呢？

假如我们将一个画布进行了旋转操作，然么之后的绘制都会按照这个旋转来进行绘制，为了避免这个问题，我们可以在旋转之前进行 save 操作保存画布状态，然后对画布进行几何变化，变化完成之后，进行 restore 将画布恢复至原状态，之后的绘制操作，就还是正常的了。