【Android自定义View】绘图之Canvas篇（五）

前言

Canvas就是我们常说的画布，之前说的所有画图操作，都是作用于Canvas之上。

• 【Android自定义View】目录

Canvas主要有以下控制方法，这些方法都是作用于Canvas整体

• translate 平移
  我们先绘制一个矩形，平移之后，再次绘制

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        //平移
        canvas.translate(100, 100);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

可以看到，2个矩形并没有重叠

• rotate 旋转
  还是之前的矩形，为了方便理解，加了2条辅助线

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        //旋转
        canvas.rotate(30);
        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png
可以看到，默认的旋转点是（0,0），当然我们也可以指定原点
rotate(float degrees, float px, float py)

        for (int i = 0; i < 6; i++) {
            canvas.rotate(360 / 6, 500, 1000);
            canvas.drawLine(500, 500, 500, 1000, paint);
        }

image.png

其实是先平移，在旋转，再平移回去，源码如下

    public final void rotate(float degrees, float px, float py) {
        if (degrees == 0.0f) return;
        translate(px, py);
        rotate(degrees);
        translate(-px, -py);
    }

image.png

• scale 缩放

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.scale(0.5f, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

• skew 斜切

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.skew(0, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

• clip系列
  clipRect(Rect rect)
clipRect(RectF rect)
clipRect(float left, float top, float right, float bottom)
clipPath(Path path)

裁剪之后，canvas其他区域会被裁剪掉，只有区域内画的才可见

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.clipRect(new Rect(500, 500, 600, 600));
        canvas.drawColor(Color.RED);
        canvas.drawCircle(500, 500, 50, paint);

image.png

• save 保存与restore 回复

之前的所有操作对于canvas 都是不可逆的，比如我们做了许多操作之后，希望将canvas的状态保存时，就要用到save。调用save方法时，会保存当前canvas状态，将其放到特定的栈中；调用restore方法时，再从栈中取出。

来看个例子，

        canvas.drawRect(new Rect(0, 0, 1000, 1000), paint);

        canvas.clipRect(new Rect(100, 100, 900, 900));
        canvas.drawColor(Color.RED);
        canvas.save();
        canvas.clipRect(new Rect(200, 200, 800, 800));
        canvas.drawColor(Color.GREEN);
        canvas.save();
        canvas.clipRect(new Rect(300, 300, 700, 700));
        canvas.drawColor(Color.YELLOW);
        canvas.save();

image.png
当我们调用2次restore

        canvas.restore();
        canvas.restore();
        canvas.drawColor(Color.MAGENTA);

image.png

原先绿色部分被填充为紫红色，符合栈后进先出的逻辑。