时间戳

首页 > 解决方案 > 在 Flutter 中调用绘图后保存在画布上绘制的像素的方法？

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

问题描述

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

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

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

在 Flutter 中，我认为每次paint在CustomPainter. 这很好，但有没有其他功能可以保留你之前绘制的内容？

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

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

标签： flutter

解决方案

这可能晚了……

导入“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”调用画家

推荐阅读