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); 

 

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。