Flutter 中的Bitmap PictureRecorder

105 阅读1分钟
_finishOverlay = await createFinishOverlay();
Future<Image> createFinishOverlay() {
  final recorder = PictureRecorder();
  final canvas = Canvas(recorder, _scaledRect);
  final step = _scaledRect.width / 2;
  final black = BasicPalette.black.paint();

  for (var i = 0; i * step < _scaledRect.height; i++) {
    canvas.drawRect(
      Rect.fromLTWH(i.isEven ? 0 : step, i * step, step, step),
      black,
    );
  }
  final picture = recorder.endRecording();
  return picture.toImage(
    _scaledRect.width.toInt(),
    _scaledRect.height.toInt(),
  );
}
canvas.drawImageRect(_finishOverlay!, _scaledRect, _drawRect, paint);

这部分代码是官方demo中绘制如下内容的代码

image.png

主要就是创建 PictureRecorder Canvas 类似于一个画布,在画布上绘制,绘制完成之后,转换成Image对象,最后再绘制到指定的画布。

除了画布的功能这里的精髓还是在这个for循环。

for (var i = 0; i * step < _scaledRect.height; i++) {

像这种大量for循环的绘制逻辑,单独拿出来使用PictureRecorder进行绘制,就可以避免每次刷新的时候都执行for循环。