在 Flutter 中调用绘图后保存画布上绘制的像素的方法？答案

【问题标题】：A way to save pixels drawn on canvas after paint call in Flutter?在 Flutter 中调用绘图后保存画布上绘制的像素的方法？
【发布时间】：2020-01-22 17:58:52
【问题描述】：

我来自网络背景，我认为当您在画布上绘制动画时，您必须在每次滴答后清除画布（否则您会在前一帧上绘制）：

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

在 Flutter 中，我认为每次您在 CustomPainter 中调用 paint 时，画布都会为您清除。这很好，但是有没有其他功能可以保留您之前绘制的内容？

就上下文而言，我正在为随机步行者设置动画，我真的不想跟踪他们之前访问过的所有点。

我试过 context.save() 和 context.restore() 但这似乎与变换有关，而不是像素。

【问题讨论】：

标签： flutter

【解决方案1】：

这可能晚了……

导入 'rendering' 和 'ui' 包：

import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';

添加下一个函数：

Future<ui.Image> canvasToImage(CustomPainter painter, Size size) async 
{
  ui.PictureRecorder recorder = ui.PictureRecorder();
  Canvas canvas = Canvas(recorder);
  if (painter != null) painter.paint(canvas, size);
  return await recorder.endRecording().toImage(size.width.floor(), size.height.floor());
}

使用前面的函数，绘制一张图片，例如一张名为“previousCanvas”的图片。

如果可用，在“CustomPainter”的“绘画”功能中绘制图像：

if (previousCanvas != null) {
    canvas.drawImage(previousCanvas, Offset(0, 0), Paint());
}

它是“异步”的，它是“慢”的，但它可以工作。不知道有没有更好的办法。

此外，您可以修改函数以绘制到“画布”对象中，而不是使用“.paint”调用画家

【讨论】：

这似乎是合理的。在写这个问题时，我实际上遇到过使用记录器来做类似的事情，但从未真正测试过。谢谢