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中如何独立绘制每一个像素点?

总结

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

  1. 生成像素数据
  2. 调用decodeImageFromPixels办法将像素数据转换为Image目标
  3. 调用Canvas的drawImage办法制作像素数据
  4. 使用Ticker目标获取每一帧更新的机遇，并告诉CustomPainter去重绘

假如有过错，还请我们协助纠正, 期望可以对我们有所协助