`
wkkyo
  • 浏览: 30740 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Canvas的save和restore方法简单理解

 
阅读更多

android的Canvas就是画布,用各种draw方法绘制时始终采用是画布的坐标。

默认情况下,屏幕和画布的坐标一致,都是横向x,纵向y,左上角是起点坐标(0,0)。

 

下面代码将在屏幕顶部居中的位置绘制一个半径为20的圆。

 

 

canvas.drawCircle(width/2, 20, 20, paint);

 

 

 

但是canvas类也提供了一些操作画布的方法:rotate(旋转),translate(平移),scale(缩放),调用了这些方法之后,画布的坐标就和屏幕坐标不一致了:

 

 

canvas.rotate(90,width/2,height/2);
canvas.drawCircle(width/2, 20, 20, paint);

  

 

 

这个时候因为画布的坐标系统旋转了90度,但是屏幕坐标是不变的,所以绘制的圆在屏幕右边居中。

 

 

下面介绍一下save和restore方法

 

save和restore方法必须是配对使用的,restore方法前必须有save方法,不然会报Underflow in restore错误。但是也可以只有save方法,不过只有save方法我觉得其实是无意义的。

 

save方法用于临时保存画布坐标系统的状态

restore方法可以用来恢复save之后设置的状态,

 

可以简单理解为调用restore之后,restore方法前调用的rotate/translate/scale方法全部就还原了,画布的坐标系统恢复到save方法之前,但是这里要注意的是,restore方法的调用只影响restore之后绘制的内容,对restore之前已经绘制到屏幕上的图形不会产生任何影响。

 

下面用简单例子说明一下

 

在屏幕顶部居中和右上角各绘制一个圆

 

 

Paint paint = new Paint();
paint.setStrokeWidth(20);
paint.setColor(Color.BLUE);
 
//顶部居中绘制一个圆
canvas.drawCircle(px/2, 20, 20, paint);
//右上角绘制一个圆
paint.setColor(Color.RED);
canvas.drawCircle(px-20, 20, 20, paint);

 

 

 

 

如果在中间加入save和restore方法

 

 

Paint paint = new Paint();
paint.setStrokeWidth(20);
paint.setColor(Color.BLUE);

canvas.save();//保存画布状态,后续绘制的都是在新画布坐标
canvas.rotate(90, px/2, py/2);//画布以中心点旋转90度
//顶部居中绘制一个圆
canvas.drawCircle(px/2, 20, 20, paint);
 
canvas.restore();//恢复画布状态
//右上角绘制一个圆
paint.setColor(Color.RED);
canvas.drawCircle(px-20, 20, 20, paint);

 

 

 

 

可以发现红色的圆依然在右上角,但是蓝色的圆到右边去了,接下来一步一步说明

调用save方法会保存当前画布的状态

然后rotate(90, px/2, py/2)方法会将画布旋转90度,

 

这时drawCircle(px/2, 20, 20, paint)方法在顶部居中绘制了一个蓝色的圆,但是由于画布被旋转了90度,所以圆被绘制在了右侧居中

 

接下来调用了restore方法将画布恢复,相当于调用rotate(-90, px/2, py/2),但是刚才蓝色的圆已经被绘制在屏幕上,此时不会再受到画布的影响,因此画布旋转之后圆还在屏幕靠右居中。

 

最后调用drawCircle(px-20, 20, 20, paint);在画布右上角在再绘制一个红色的圆,因为画布已经恢复成save前的状态,最后可以看到红色的圆是在右上角的,而蓝色的圆则在右侧居中。

 

需要注意的是restore只能回复到save之后,如果在save前已经调用过其他操作画布的方法,是不能通过restore还原的。

 

  • 大小: 5.9 KB
  • 大小: 6 KB
  • 大小: 8.2 KB
  • 大小: 8.4 KB
分享到:
评论

相关推荐

    Android canvas.save()和canvas.restore()的理解

    `save()`和`restore()`是`Canvas`中两个非常关键的方法,它们主要用于管理绘图状态,确保复杂绘图过程中的可逆性和精确性。在本文中,我们将深入理解这两个方法的作用以及如何在实际应用中使用它们。 首先,`canvas...

    android中canvas的save和restore用法

    `save()`和`restore()`是`Canvas`类中两个非常重要的方法,它们用于管理和恢复绘图状态,确保复杂的绘图操作能够正确无误地进行。在本文中,我们将深入探讨这两个方法的用法、原理以及它们在实际开发中的应用。 `...

    Android Canvas save restore演示

    `save()`和`restore()`是Canvas中的两个关键方法,它们在复杂的绘图场景中起到至关重要的作用。本演示将深入探讨这两个方法以及它们在Android图形绘制中的应用。 `Canvas.save()`方法的主要功能是保存当前Canvas的...

    android 中canvas的save和resotre用法

    `save()`和`restore()`是Canvas的重要方法,用于保存和恢复绘图状态,这对于实现复杂的图形变换、绘制流程控制以及避免不必要的计算至关重要。下面将详细阐述这两个方法的用法和应用场景。 1. `save()`方法: `save...

    微信小程序小技巧系列《十一》canvas中的save和restore,view使用bindtap传值 ...

    一:canvas中的save和restore   一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~ 看效果: (此图片来源于网络,如有...

    微信小程序canvas实现矩形元素自由移动

    为提高性能,可以使用`ctx.save()`和`ctx.restore()`方法保存和恢复当前绘图状态,或者使用局部重绘,只对移动的矩形区域进行更新。 6. **动画效果**:如果希望矩形平滑移动,可以使用定时器和缓动函数来实现。在`...

    使用Canvas类绘制android机器人

    在绘制过程中,我们可以使用save()和restore()方法来保存和恢复Canvas的状态。这对于进行多次绘制并且需要保持某些属性不变(如坐标变换或剪裁区域)的情况下非常有用。例如,在绘制机器人的不同部分时,可能会涉及...

    canvas的clipRect理解

    在实际应用中,`clipRect`常常与`save()`和`restore()`配合使用。`save()`方法保存当前的绘图状态(包括剪裁区域、变换矩阵等),`restore()`则恢复到之前保存的状态。这样,可以在不同的剪裁区域内执行绘图操作,并...

    安卓绘图 canvas 绘图 平移缩放

    下面是一个简单的示例,展示如何使用Canvas进行平移和缩放操作: ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 保存当前状态 canvas.save(); // 平移 canvas....

    canvas动态画出视图树

    另外,为了提高性能,可以考虑使用剪裁区域(`clip` 方法)或者保存/恢复状态(`save` 和 `restore` 方法)来避免不必要的重绘。如果视图树非常大,还可以采用分层渲染策略,只绘制可见部分或使用虚拟DOM技术优化。 ...

    自定义view(Paint和Canvas)

    5. **save()** 和 **restore()**:保存和恢复Canvas的状态,用于进行复杂的图形变换,如旋转、缩放、平移等。 6. **translate()**、**scale()** 和 **rotate()**:这些方法用于改变Canvas的坐标系统,从而影响后续...

    Android canvas 放大 缩小 平移

    查看源码,研究其中的onDraw()方法和如何处理触摸事件,是学习和理解Android Canvas放大、缩小和平移的很好途径。 总的来说,Android的Canvas和Matrix类为开发者提供了强大的图形绘制能力,通过熟练掌握它们,你...

    canvas 原位置旋转图片

    本文将详细讲解如何在Canvas上实现原位置旋转图片,并通过`translate`和`rotate`两个关键方法来理解这一过程。 首先,我们需要创建一个Canvas元素并在HTML中插入它: ```html <!DOCTYPE html> <title>Canvas ...

    Android canvas画图操作之切割画布实现方法(clipRect)

    `onDraw`方法中的`canvas.save()`和`canvas.restore()`用于保存和恢复画布的状态。`save()`在调用时会记录当前画布的所有属性,包括剪裁区域,然后在后续的`restore()`调用中恢复到保存的状态。这样可以确保在复杂的...

    Canvas2D梯形拉伸.zip

    在实际应用中,可能还会涉及到性能优化,例如通过保存和恢复状态(`save()` 和 `restore()`)来避免不必要的重绘,或者使用Web Workers来异步处理图像数据,以减少主线程的负担。 总的来说,“Canvas2D梯形拉伸”是...

    html5 canvas.rar

    此外,还可以使用`clearRect`来清除指定区域,`save`和`restore`用于保存和恢复当前绘图状态。 在"image"文件中,可能包含了一个图像资源,我们可以利用Canvas API将图片加载到canvas上并进行处理。`drawImage`方法...

    HTML5:Canvas教程

    translate() 方法可以移动坐标系,rotate() 方法可以旋转坐标系,restore() 方法可以恢复之前的坐标系,save() 方法可以保存当前的坐标系。 Canvas 还提供了多种绘制方法,如 stroke() 方法绘制轮廓,strokeText()...

    图像CANVAS属性.rar_Canvas C#_c++ builder canvas_canvas

    理解并掌握Canvas的属性和方法,可以帮助开发者创建出各种复杂且美观的图形和动画,极大地提升应用的视觉效果和用户体验。通过阅读“图像CANVAS属性.txt”和参考其他资源,你可以进一步深入学习和实践Canvas的使用...

    使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码

    通过查看和分析这些文件,你可以更好地理解如何在实际项目中运用HTML5 canvas进行图片处理。 总的来说,HTML5 canvas提供了一套丰富的绘图API,使开发者能够在浏览器端进行复杂的图像操作,无需借助服务器端的处理...

    android利用Paint在Canvas上实现竖排写字

    - **Canvas**:Canvas是Android中的画布,提供了各种绘制方法,如drawRect(), drawText()等,让我们能够在屏幕上绘制图形和文本。 - **Paint**:Paint是Android的画笔,它定义了图形和文本的样式,如颜色、字体...

Global site tag (gtag.js) - Google Analytics