【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);
複製代碼

原先綠色部分被填充爲紫紅色，符合棧後進先出的邏輯。

你的承認，是我堅持更新博客的動力，若是以爲有用，就請點個贊，謝謝