【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);
复制代码

能够看到，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);
复制代码

能够看到，默认的旋转点是（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);
        }
复制代码

实际上是先平移，在旋转，再平移回去，源码以下

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

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);
复制代码

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);
复制代码

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);
复制代码

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();
复制代码

当咱们调用2次 restore

canvas.restore();
        canvas.restore();
        canvas.drawColor(Color.MAGENTA);
复制代码

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

你的承认，是我坚持更新博客的动力，若是以为有用，就请点个赞，谢谢