首页 > 其他分享 >Android 中Canvas的save(),saveLayer()和restore()解析

Android 中Canvas的save(),saveLayer()和restore()解析

时间:2023-02-14 16:05:59浏览次数:59  
标签:restore Canvas saveLayer canvas mPaint RADIUS context save


1、save()方法 :
用来保存Canvas的状态,save()方法之后的代码,可以调用Canvas的平移、放缩、旋转、裁剪等操作!
2、restore()方法:
用来恢复Canvas之前保存的状态(可以想成是保存坐标轴的状态),防止save()方法代码之后对Canvas执行的操作,继续对后续的绘制会产生影响,通过该方法可以避免连带的影响

总结:就是在save之前绘制的状态会保存下来,在restore方法之后绘制的不会再因为状态而改变

示例说明:
例如:我们想在画布上绘制一个向右的三角箭头,当然,我们可以直接绘制,另外,我们也可以先把画布旋转90°,画一个向上的箭头,然后再旋转回来(这种旋转操作对于画圆周上的标记非常有用),最后,我们在右下角绘一个20像素的圆!

网上对这个问题的解决说是旋转回来,我的感觉其实save()保存的就是Canvas中坐标轴的状态。

/**
* 测试canvas.save与canvas.restore方法
* @Project App_View
* @Package com.android.view.canavssave
* @author chenlin
* @version 1.0
* @Date 2014年5月7日
*/
public class CanvasView extends View {
public final static String TAG = "CanvasView";
private int mWidth = 300;
private int mHeight = 300;

public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public CanvasView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public CanvasView(Context context) {
this(context, null);
}

@Override
protected void onDraw(Canvas canvas) {
// 绘制背景画笔
Paint backPaint = new Paint();
backPaint.setColor(Color.GRAY);

// 绘制线条画笔
Paint linePaint = new Paint();
linePaint.setStrokeWidth(4);
linePaint.setColor(Color.RED);

// 绘制背景
canvas.drawRect(0, 0, mWidth, mHeight, backPaint);
canvas.save();
//旋转画布
canvas.rotate(90, mWidth / 2, mHeight / 2);
//绘制三条线条
canvas.drawLine(mWidth / 2, 0, 0, mHeight / 2, linePaint);
canvas.drawLine(mWidth / 2, 0, mWidth, mHeight / 2, linePaint);
canvas.drawLine(mWidth / 2, 0, mWidth / 2, mHeight, linePaint);
canvas.restore();
//在恢复后绘制圆形 ,保持原状,没有旋转
canvas.drawCircle(mWidth - 100, mHeight - 100, 50, linePaint);

super.onDraw(canvas);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
//mWidth = w;
//mHeight = h;
super.onSizeChanged(w, h, oldw, oldh);
}

}

1)canvas.save后的图片

Android 中Canvas的save(),saveLayer()和restore()解析_canvas

2)没有save的图片

Android 中Canvas的save(),saveLayer()和restore()解析_android_02

3.saveLayer的用法

Canvas 在一般的情况下可以看作是一张画布,所有的绘图操作如drawBitmap, drawCircle都发生在这张画布上,这张画板还定义了一些属性比如Matrix,颜色等等。但是如果需要实现一些相对复杂的绘图操作,比如多层动 画,地图(地图可以有多个地图层叠加而成,比如:政区层,道路层,兴趣点层)。Canvas提供了图层(Layer)支持,缺省情况可以看作是只有一个图 层Layer。如果需要按层次来绘图,Android的Canvas可以使用SaveLayerXXX, Restore 来创建一些中间层,对于这些Layer是按照“栈结构“来管理的:

Android 中Canvas的save(),saveLayer()和restore()解析_android_03

示例代码:

public class LayerView extends View {
private static final int RADIUS = 75;
private static final int LAYER_FLAGS = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
| Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;

private Paint mPaint;

public LayerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public LayerView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}

public LayerView(Context context) {
super(context);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}

@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
canvas.translate(10, 10);

// 绘制第一个圆圈,在layer1上
mPaint.setColor(Color.RED);
canvas.drawCircle(RADIUS, RADIUS, RADIUS, mPaint);

// 设置第二个图层的透明度
canvas.saveLayerAlpha(0, 0, 300, 300, 0x88, LAYER_FLAGS);
// 绘制第二圆圈,在layer2上
mPaint.setColor(Color.BLUE);
canvas.drawCircle(RADIUS + 75, RADIUS + 75, RADIUS, mPaint);

// 设置第三个图层的透明度
canvas.saveLayerAlpha(100, 100, 400, 400, 0x88, LAYER_FLAGS);

// 绘制第三圆圈,在layer3上
mPaint.setColor(Color.GREEN);
canvas.drawCircle(RADIUS + 120, RADIUS + 120, RADIUS, mPaint);
canvas.restore();
}

}

结果如图:

Android 中Canvas的save(),saveLayer()和restore()解析_图层_04


标签:restore,Canvas,saveLayer,canvas,mPaint,RADIUS,context,save
From: https://blog.51cto.com/u_12516227/6055946

相关文章

  • python canvas画布的介绍
    1、在画布上绘制对象,通常用create_xxxx,xxxx=对象类型。2、每次调用create_xxx,都会返回创建组件的ID,也可以用tag属性指定标签。3、通过调用canvas.move实现一次性动作。实例#......
  • HTML5 canvas画一个折线图
    <body><canvasid="drawing"style="border:1pxsolid;"width="600"height="400"></canvas><scripttype="text/javascript">letdrawing=document.query......
  • HTML5 canvas基础使用
    <body> <!-- 1,canvas的宽和高要在标签中写,写在style中将会使画布拉伸到指定宽和高,不是真正的宽高。 --> <canvasid='drawing'width="300"height="700"......
  • 用canvas怎么制作下雪效果
    首先新建一个html文件,将body的背景设置为天空的那种深蓝色,并创建一个canvas,canvas的操作逻辑都放在snow.js中:<!DOCTYPEhtml><head><style>body{backgro......
  • canvas模拟鼠标拉框;画折线;(基于VUE)
    <template><divref="mouseDiv"style="background-color:transparent;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2023;"><div......
  • canvas + Cesium 动画图片材质
    letosm=Cesium.createOpenStreetMapImageryProvider({url:"https://a.tile.openstreetmap.org/",})letviewer=newCesium.Viewer(thi......
  • vue实现canvas画很多条线,点击那条线就删除那条线需求。
    公司最近提了个新需求,就是要在canvas画板上要画许多条线,点击那条线就删除那条线的功能,刚开始我用的原生canvas,很麻烦并不容易实现。于是改变思路,用到了'KonvaJS'1、KonvaJ......
  • 低代码平台前端的设计与实现(三)设计态画布DesignCanvas的设计与实现
    上一篇文章,我们分析并设计了关于构建引擎BuildEngine的切面设计。本文我们将基于BuildEngine所提供的切面处理能力,在ComponentBuildAspectHandler中通过一些逻辑,来完成一个......
  • 跨境电商防关联:Canvas指纹的作用
    首先我们来复习一下浏览器指纹的相关知识。网站通过一定的技术手段获取了用户端关于设备、网络、浏览习惯、常用网页等数据信息以后,将这些信息进行综合分析、计算,从而对客户......
  • 记录--原生 canvas 如何实现大屏?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言可视化大屏该如何做?有可能一天完成吗?废话不多说,直接看效果,线上Demo地址lxfu1.github.io/large-sc......