Canvas: canvas的save()和restore()

- save(): 用來保存canvas的狀態。

- restore(): 用來恢復Canvas旋轉、縮放等之后的狀態，當和canvas.save( )一起使用時，恢復到canvas.save( )保存時的狀態。

注意：

1. 這里的狀態包括矩陣的變換狀態，如：平移(Translate), 縮放(Scale), 旋轉(Rotate), 傾斜(Skew)， 以及畫布的裁剪區域clip; 

2. Canvas的save()和restore()方法只會在有效范圍內生效，它是繪制狀態的存儲器，並不是畫布內容的存儲器, 在canvas上繪制的路徑和位圖並不是繪制狀態的一部分。

下面使用一個簡單的Demo來驗證這個結論：

1. 繪制一個簡單的圓：

package com.yongdaimi.android.androidapitest.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

import androidx.annotation.Nullable;

public class ClockView extends android.view.View {

    private Paint mPaint;

    public ClockView(Context context) {
        this(context, null, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setColor(Color.RED);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int measuredWidth = getMeasuredWidth();
        int x = measuredWidth, y = measuredWidth;

        int cx = x / 2;

        int radius = x / 2;
        int cy = radius;

        // Draw background circle
 canvas.drawCircle(cx, cy, radius, mPaint);

    }
}

2. 畫類似儀表盤效果的刻度

package com.yongdaimi.android.androidapitest.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

import androidx.annotation.Nullable;

public class ClockView extends android.view.View {

    private Paint mPaint;

    public ClockView(Context context) {
        this(context, null, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setColor(Color.RED);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int measuredWidth = getMeasuredWidth();
        int x = measuredWidth, y = measuredWidth;

        int cx = x / 2;

        int radius = x / 2;
        int cy = radius;

        // Draw background circle
        canvas.drawCircle(cx, cy, radius, mPaint);

        // Draw scale
        mPaint.setColor(Color.BLUE);
        canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        canvas.save();

        for (int i = 0; i < 3; i++) {
            canvas.rotate(30, x / 2, y / 2); // 注意這里的后兩個參數：代表以哪個位置為中心開始旋轉，默認是以(0,0)位置為中心開始旋轉，這里是以該圓的圓心為中心點開始旋轉。
            canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint); }

    }
}

此時，畫布已經順時針旋轉了3個30度，即90度。並且，在旋轉畫布之前已經調用了canvas.save()方法，所以此時保存的canvas的狀態是未旋轉時的正常狀態。

3. 繼續畫一條直線，觀察效果

package com.yongdaimi.android.androidapitest.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

import androidx.annotation.Nullable;

public class ClockView extends android.view.View {

    private Paint mPaint;

    public ClockView(Context context) {
        this(context, null, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setColor(Color.RED);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int measuredWidth = getMeasuredWidth();
        int x = measuredWidth, y = measuredWidth;

        int cx = x / 2;

        int radius = x / 2;
        int cy = radius;

        // Draw background circle
        canvas.drawCircle(cx, cy, radius, mPaint);

        // Draw scale
        mPaint.setColor(Color.BLUE);
        canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        canvas.save();

        for (int i = 0; i < 3; i++) {
            canvas.rotate(30, x / 2, y / 2);
            canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        }

        mPaint.setColor(Color.YELLOW); mPaint.setStrokeWidth(10);
        canvas.drawLine(x / 2, y / 2, x / 2, y / 4, mPaint);
    }
}

上面對畫筆進行加粗，並且把畫筆的顏色變成了黃色，注意到當前線條的方向和最后一條儀表盤刻度的方向是一致的(都旋轉了90度)。下面在繪制黃線的code之前，調用 canvas.restore() 恢復畫布的狀態：

package com.yongdaimi.android.androidapitest.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

import androidx.annotation.Nullable;

public class ClockView extends android.view.View {

    private Paint mPaint;

    public ClockView(Context context) {
        this(context, null, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setColor(Color.RED);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int measuredWidth = getMeasuredWidth();
        int x = measuredWidth, y = measuredWidth;

        int cx = x / 2;

        int radius = x / 2;
        int cy = radius;

        // Draw background circle
        canvas.drawCircle(cx, cy, radius, mPaint);

        // Draw scale
        mPaint.setColor(Color.BLUE);
        canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        canvas.save();

        for (int i = 0; i < 3; i++) {
            canvas.rotate(30, x / 2, y / 2);
            canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        }

        canvas.restore();
        
        mPaint.setColor(Color.YELLOW);
        mPaint.setStrokeWidth(10);
        canvas.drawLine(x / 2, y / 2, x / 2, y / 4, mPaint);
    }
}

運行：

注意到黃線又恢復了正常顯示。當然，不使用canvas.restore()，而是繼續旋轉－90度畫布，也是可以恢復畫布到初始狀態的。 canvas.rotate(-90, x /2, y /2);