保存canvas然后恢复,这是为什么呢?

Save canvas then restore, why is that?

经常看到下面的代码

canvas.save().
canvas translate or rotate
some drawing
canvas.restore

我不明白为什么我们先保存然后再恢复。撤消我们刚刚所做的有什么意义!我确定我在这里遗漏了一些东西 谢谢

当背景由多个对象组成时,一个很好的方法是保存此 "static" 背景并只重绘发生变化的对象。这节省了(处理器)时间。

What's the point of undoing what we just did!

不过你不是。如果您只是脱口而出,听起来确实会发生这种情况,但实际上并非如此。

可以这样想:

您想要在同一个 onDraw(Canvas) 调用中应用一系列非常复杂的平移和旋转。现在,由于您应用到 Canvas 的每个 translation/rotation 都按顺序发生,您将不得不撤消对 Canvas 的最后调整,或者以某种方式根据之前的调整计算新的调整想画什么就画什么。那会变得非常混乱,很快。

使用 canvas.save()canvas.restore() 是简化该过程的非常简单的方法。

通过在 save/restore 块中对 Canvas 进行调整,您可以有效地隔离所述调整,以便接下来要绘制的任何内容都不会受到您的影响现在重新画。

现在,对名称进行更好的解释:

canvas.save() 说我想保存当前 Canvas 的调整状态,以便稍后返回。

canvas.restore() 是说我想将 Canvas 的调整恢复到我上次调用 cavas.save()

时的状态

它的美妙之处在于它的简单性。如果您已经在 save/restore 块中绘制了您想绘制的任何内容,并且您不再需要为下一次绘制进行这些调整,那么使用它可以让您丢弃那些不必要的调整和 return 到您的状态想开始你的下一张画。

希望这有助于解释它!

使用 canvas 涉及 canvas 上的各种平移、缩放、旋转、倾斜过程。 save() 方法保留上述任何增强之前的状态,restore() 及时倒带到未注入增强的状态。换句话说,您可以在 canvas 的任何转换之前保存一个预状态,在该过程中进行旋转以及您想要的任何其他操作,但是当您完成倒带到任何增强之前的状态时。

我知道这个问题有点过时了,但是对于任何仍在寻找答案的人,我可以 ELI5;

想象 canvas 是一张纸,你的任务是画一个机器人的图片,一个机器人正面朝上,在底部,另一个机器人倒过来,稍微向右移动,顶部缩小约 40%。像这样的东西;

你会如何开始?先做什么比较容易?

您可能会先在底部画更大的机器人,因为它是正面朝上的,而且在感觉更自然的方向上画画要容易得多。所以你已经完成了第一个,现在你如何接近第二个倒置机器人?

  • 您可以尝试按原样绘制它,但这会有点困难,因为您是颠倒的。

  • 你可以把你的纸旋转180°,稍微移动你的起点,然后开始画小一点的,画完之后再把纸旋转回来。

这就是 canvas.save()canvas.restore() 所做的,它们允许您以任何方式修改您的 canvas,使其 更容易 你画你需要的东西。您不需要使用这些方法,但它们确实可以简化很多过程。上面看起来像

drawRobot()
canvas.save()
canvas.rotate(180)
canvas.translate(100, 0)
canvas.scale(40,40)
drawRobot()
canvas.restore()

如果我们查看 restore() 文档,它会显示

is used to remove all modifications to the matrix/clip state since the last save call

要查看这些修改是什么,我们看一下 save() 它说

translate, scale, rotate, skew, concat or clipRect, clipPath

好吧,看看那个,我们确实使用了 translate rotatescale 但我们也调用了 drawRobot() 所以不会调用 restore 擦除我们的绘图?不会,因为不影响绘图,只是修改。因此,当我们调用 restore 时,它将 return 我们的 canvas 恢复到我们开始第二次绘图之前的状态。

我想最简单的表达方式是:

它会删除设置中的更改,但不会删除绘图本身。

设置可以包括缩放canvas等,调用canvas.save()时将缩放恢复到初始状态。