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. 生成像素数据
   
3. 调用decodeImageFromPixels方法将像素数据转换为Image对象
   
4. 调用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. 
   
2. 
   

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

   
   
   
3. 
   

   构造函数中有一个_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. 生成像素数据
   
3. 调用decodeImageFromPixels方法将像素数据转换为Image对象
   
4. 调用Canvas的drawImage方法绘制像素数据
   
5. 使用Ticker对象获取每一帧更新的时机，并通知CustomPainter去重绘
   

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