什么是canvas.save和canvas.restore？

Question

我想知道为什么以及何时使用canvas.save、canvas.restore，甚至可能使用canvas.saveLayer。
我听说它们确实很有用，但我不知道何时使用它们。

Answer 1

canvas.save和canvas.saveLayer的工作方式略有不同，但它们都具有相同的对应关系：

这允许您恢复保存堆栈上最近的条目之前的状态，即它“弹出当前保存堆栈”。这意味着在当前状态下对画布所做的任何转换和剪辑都将被删除，如果使用了saveLayer，则保存的层将被合成到画布中（绘制顺序将保持不变）。

正如我前面提到的，这允许您保存画布所处的状态。您可以执行所需的任何转换和剪辑，这些转换和剪辑将使用restore删除：

canvas.save();

canvas.transform(..); // Transforms the canvas, which will affect the draw call.
canvas.drawRect(...); // Affected by the transform.

canvas.restore();

canvas.drawRect(...); // Not affected by the transform.

请注意，RenderObject的所有子级将使用相同的PaintingContext，即相同的Canvas。因此，如果您在单个子级中转换画布，它也将为随后绘制的所有其他子级进行转换。这可能是不需要的行为，也是您总是希望保存和还原画布状态的原因。

这有点复杂，我敦促您阅读此方法的全面文档。顺便说一句，截至2019年1月，savelayer在Flutter web中不起作用。

savelayer和save之间的基本区别在于，savelayer将在使用restore时合成层。对于一个简单的示例，我构造了这个没有bounds（这就是为什么传递null)的代码段，这将保存整个画布：

canvas.drawRect(rect, Paint()..color = const Color(0xffff0000)); // Draws a red rect.
canvas.saveLayer(null, Paint()..blendMode = BlendMode.multiply); // Saves the whole canvas.

canvas.drawRect(
  rect.shift(const Offset(20, 20)),
  Paint()..color = const Color(0xff0000ff), // Draws a blue rect.
);

canvas.restore(); // Composites the red rect into the blue rect.

这是没有savelayer的示例的样子：