Flutter中绘制在画布上的像素如何在调用paint后保存？

Question

Flutter中绘制在画布上的像素如何在调用paint后保存？

3

我来自于Web开发背景，我认为当你在画布上绘制动画时，每次绘制之前都需要清除画布（否则你就会在之前的帧上绘制）：

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

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

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

对于上下文，我正在动画随机行走者，我不想跟踪它们之前访问过的所有点。

我尝试过context.save()和context.restore()，但这似乎涉及转换而不是像素。

- Nolence

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2451879 · Accepted Answer

这可能有些晚了...

使用以下代码导入'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”的“paint”函数中，如果有可用的图片，则将其绘制出来。

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

这是一个“异步”的操作，速度较慢但可行。我不知道是否有更好的方法来完成它。

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