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

 



如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
posted @   夜行过客  阅读(4096)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示