- save(): 用来保存canvas的状态。

- restore(): 用来恢复Canvas旋转、缩放等之后的状态,当和canvas.save( )一起使用时,恢复到canvas.save( )保存时的状态。

注意:

1. 这里的状态包括矩阵的变换状态,如:平移(Translate), 缩放(Scale)旋转(Rotate), 倾斜(Skew), 以及画布的裁剪区域clip

2. Canvas的save()和restore()方法只会在有效范围内生效,它是绘制状态的存储器,并不是画布内容的存储器, 在canvas上绘制的路径和位图并不是绘制状态的一部分。

下面使用一个简单的Demo来验证这个结论:

1. 绘制一个简单的圆:

Canvas: canvas的save()和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);

    }
}

2. 画类似仪表盘效果的刻度

Canvas: canvas的save()和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); // 注意这里的后两个参数:代表以哪个位置为中心开始旋转,默认是以(0,0)位置为中心开始旋转,这里是以该圆的圆心为中心点开始旋转。
            canvas.drawLine(x / 2, y / 8, x / 2, 0, mPaint);
        }

    }
}

此时,画布已经顺时针旋转了3个30度,即90度。并且,在旋转画布之前已经调用了canvas.save()方法,所以此时保存的canvas的状态是未旋转时的正常状态。

3. 继续画一条直线,观察效果

Canvas: canvas的save()和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);
        }

        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: canvas的save()和restore()

注意到黄线又恢复了正常显示。当然,不使用canvas.restore(),而是继续旋转-90度画布,也是可以恢复画布到初始状态的。 canvas.rotate(-90, x /2, y /2); 

 

分类:

技术点:

相关文章: