Flutter中如何独立绘制每一个像素点?

前提

前一阵我参照教程：GAMEBOY 仿真器 做了一个game boy模拟器，经过漫长的调试，终于成功的在电脑上运行了起来，但作为一个移动端开发者，我最终还是想要在手机上运行，在经过一番研究后，我卡在了第一个难点：在Flutter中如何单独绘制每一个像素点呢？

Gamyboy的显示器尺寸是160 * 144，素点的格式是RGB，模拟器大概每隔16ms生成一帧画面，当模拟器运行时，我就能源源不断的拿到每一帧的像素数据（这里的像素数据可以看做是一个int32数组，长度为160 * 144），我要做的就是找到一种方法，将每一帧的像素数据绘制到屏幕上。一番搜素后，终于在How do I Render Individual Pixels in Flutter?上找到了答案

绘制像素点

想要直接绘制原始的像素点，需要用到Canvas的一个方法：

/// Draws the given [Image] into the canvas with its top-left corner at the
/// given [Offset]. The image is composited into the canvas using the given [Paint].
void drawImage(Image image, Offset offset, Paint paint)

从方法签名中可以看出，canvas绘制的是一个Image对象，它持有原始的像素数据，所以我们需要先将像素数据转换成Image对象，可以使用decodeImageFromPixels方法

/// Convert an array of pixel values into an [Image] object.
///
/// The `pixels` parameter is the pixel data in the encoding described by
/// `format`.
/// ...
void decodeImageFromPixels(
  Uint8List pixels,
  int width,
  int height,
  PixelFormat format,
  ImageDecoderCallback callback, {
  int? rowBytes,
  int? targetWidth,
  int? targetHeight,
  bool allowUpscaling = true,
})

• pixels是一个一维数组，每一个元素是一个字节
• width和height代表图片的宽和高
• format用来设置像素点的格式，比如：PixelFormat.rgba8888表示一个像素点由四个字节组成，分别表示红，绿，蓝，透明度等信息
• callback为图片解码完成后的回调函数，函数参数为最终生成的Image对象

/// Callback signature for [decodeImageFromList].
typedef ImageDecoderCallback = void Function(Image result);

至此，整个流程已经走通，共分为三步：

1. 生成像素数据
2. 调用decodeImageFromPixels方法将像素数据转换为Image对象
3. 调用Canvas的drawImage方法绘制像素数据

读到这里，有些朋友可能会有疑惑，我从哪里去获取Canvas对象呢? 如何做到实时更新每一帧画面呢？接下来，我将用一个案例将整个流程串起来

演示案例

作为演示，这里用生成的雪花噪点数据来代替模拟器生成的像素数据，完整的案例请看：github.com/hcoderLee/f…

首先我们需要一个不断生成像素数据的类

import 'dart:ui' as ui;

class Emulator {
  /// 每一帧生成的像素所对应的Image对象
  ui.Image? _image;

  ui.Image? get image => _image;

  bool _isRunning = false;
  Timer? _timer;

  /// 用于生成雪花噪点数据
  int xorshift32(int x) {
    x ^= x << 13;
    x ^= x >> 17;
    x ^= x << 5;
    return x;
  }

  int seed = 0xDEADBEEF;

  /// 生成原始像素数据，并转换为Image对象
  Future<ui.Image> makeImage() {
    final c = Completer<ui.Image>();
    final pixels = Int32List(lcdWidth * lcdHeight);
    for (int i = 0; i < pixels.length; i++) {
      seed = pixels[i] = xorshift32(seed);
    }
    void decodeCallback(ui.Image image) {
      c.complete(image);
    }

    // 将像素数据转换为Image对象
    ui.decodeImageFromPixels(
      pixels.buffer.asUint8List(),
      lcdWidth,
      lcdHeight,
      ui.PixelFormat.rgba8888,
      decodeCallback,
    );
    return c.future;
  }

  /// 不断的生成每一帧的画面
  void run() {
    if (_isRunning) {
      return;
    }
    _isRunning = true;

    _timer?.cancel();
    /// 每隔16ms（更新一帧的时间）更新一次画面
    _timer = Timer.periodic(const Duration(milliseconds: 16), (timer) async {
      final newImage = await makeImage();
      _image?.dispose();
      _image = newImage;
    });
  }

  void dispose() {
    _timer?.cancel();
    _timer = null;
    _image?.dispose();
  }
}

当有了Image对象后，需要调用Canvas的drawImage方法来绘制，这里使用CustomPaint组件来获取Canvas对象：

CustomPaint(
    painter: _LCD(
      emulator: _emulator,
      timer: _timer,
    ),
);

class _LCD extends CustomPainter {
  final Emulator emulator;

  _LCD({
    required this.emulator,
    required _Timer timer,
  }) : super(repaint: timer);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    final image = emulator.image;
    if (image != null) {
      canvas.drawImage(image, Offset.zero, Paint());
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

CustomPaint组件有一个重要的参数: painter, 它是一个CustomPainter对象，我们可以自定义一个类去继承CustomPainter, 实现paint方法，获取到Canvas对象，至此，我们可以利用canvas去绘制任何我们想要的东西

这里我们定义了_LCD去继承CustomPainter，它持有Emulator对象，从而获取要绘制的Image对象，这里有两个地方需要重点关注一下：

1. shouldRepaint方法表示如果上层组件发生重建，生成了新的CustomPaint对象，是否需要重新调用paint方法绘制内容，因为我的需求是每一帧都要绘制新的画面，所以这里直接返回true（表示需要重新调用paint方法），真实的业务场景需要根据具体情况去判断是否返回true

2. 构造函数中有一个_Timer对象，并调用了super(repaint: timer)，那么这个_Timer对象是用来做什么的呢？

查看CustomPainter的文档，有这么一段说明：

/// The painter will repaint whenever `repaint` notifies its listeners.

repaint会通知CustomPainter去重新绘制画面，我们再查看repaint的类型是Listenable，这里我们自定义一个_Timer类，用来在每一帧更新的时候去通知CustomPainter重绘

class _Timer extends ChangeNotifier {
  final TickerProvider _vsync;
  late final Ticker _ticker;

  _Timer(this._vsync) {
    _ticker = _vsync.createTicker(_onTick);
    _ticker.start();
  }

  void _onTick(Duration elapsed) {
    notifyListeners();
  }

  @override
  void dispose() {
    _ticker.stop();
    _ticker.dispose();
    super.dispose();
  }
}

这里我们继承了ChangeNotifier，因此间接继承了Listenable 在构造函数里创建了一个Ticker对象，用来获取每一帧更新的时机，_onTick方法会在每一帧更新的时候调用，并通知CustomPaint去重绘。实际上，Flutter的动画也是使用Ticker对象，在每一帧更新的时候触发组件重绘 为了创建Ticker对象，需要用到TickerProvider对象，它提供了创建Ticker对象的方法（createTicker），并确保onTick回调函数只在组件处在前台活跃状态的时候才触发。为了获得TickerProvider对象，最常用的做法是创建一个StatefullWidget，并给State添加SingleTickerProviderStateMixin mixin，如果大家写过动画相关的代码，对这一套应该不陌生：

class _GameView extends StatefulWidget {
  const _GameView({Key? key}) : super(key: key);

  @override
  State<_GameView> createState() => _GameViewState();
}

class _GameViewState extends State<_GameView>
    with SingleTickerProviderStateMixin {
  late final Emulator _emulator;
  /// 在每一帧更新的时候去通知_LCD重绘
  late final _Timer _timer;

  @override
  void initState() {
    super.initState();
    _emulator = Emulator();
    // 运行模拟器，不断的产生每一帧的像素数据
    _emulator.run();
    _timer = _Timer(this);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: lcdWidth.toDouble(),
      height: lcdHeight.toDouble(),
      child: CustomPaint(
        painter: _LCD(
          emulator: _emulator,
          timer: _timer,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _emulator.dispose();
    _timer.dispose();
    super.dispose();
  }
}

至此，我们已经完成了所有的步骤，看一下运行效果：

总结

本文讲述了Flutter中如何实时绘制自己生成的像素数据，有以下几个步骤：

1. 生成像素数据
2. 调用decodeImageFromPixels方法将像素数据转换为Image对象
3. 调用Canvas的drawImage方法绘制像素数据
4. 使用Ticker对象获取每一帧更新的时机，并通知CustomPainter去重绘

如果有错误，还请大家帮忙指正, 希望能够对大家有所帮助

作者：RobertLee10396
链接：https://juejin.cn/post/7129170601238855694