美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、金属党、专门写Bug~


Canvas的save和restore

Canvas的save和restore

在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法。

onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布。

在onDraw方法里,我们经常会看到调用save和restore方法,它们到底是干什么用的呢?

❑ save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

❑ restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

save和restore要配对使用(restore可以比save少,但不能多),如果restore调用次数比save多,会引发Error。

save()和restore()是用来规定操作的范围的。
例如:我们先想在画布上绘制一个右向的三角箭头,当然,我们可以直接绘制,另外,我们也可以先把画布旋转90°,画一个向上的箭头,然后再旋转回来(这种旋转操作对于画圆周上的标记非常有用)。然后,我们想在右下角有个20像素的圆,那么,onDraw中的核心代码是:

int px = getMeasuredWidth();
int py = getMeasuredWidth();
// Draw background
canvas.drawRect(0, 0, px, py, backgroundPaint);
canvas.save();
canvas.rotate(90, px/2, py/2);                
// Draw up arrow
canvas.drawLine(px / 2, 0, 0, py / 2, linePaint);                
canvas.drawLine(px / 2, 0, px, py / 2, linePaint);
canvas.drawLine(px / 2, 0, px / 2, py, linePaint);
canvas.restore();
// Draw circle
canvas.drawCircle(px - 10, py - 10, 10, linePaint);

效果如图1所示:
图1
saverestore1
如果我们不调用save和restore会是什么样子呢?如图2所示:

图2
saverestore2
从这两个图中,我们就能看到圆圈位置的明显差异。不进行Canvas的save和restore操作的话,所有的图像都是在画布旋转90°后的画布上绘制的。当执行完onDraw方法,系统自动将画布恢复回来。save和restore操作执行的时机不同,就能造成绘制的图形不同。
所以,save和restore之间,往往夹杂的是对Canvas的特殊操作。

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

win10小知识课堂

当我们使用了两个或两个以上的显示器的时候,一般要更换壁纸选择之后,默认都是所有显示器都用的同一张壁纸,而对于我们想在不同的显示器上用不同的壁纸怎么办呢? 其实这个功能在win7(?)的时候就有了,当…

继续阅读
更早的文章

前端面试题总汇

最近跑面试,于是整理下最近面试所遇到的各种形形色色的问题: \n\n 目录: \n\n \n * angular中英this 和 scope的区别 \n * ajax返回状态…

面试 继续阅读
comments powered by Disqus
沪ICP备15043964号-3