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

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

至此,整个流程已经走通,共分为三步:

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

读到这里,有些朋友可能会有疑惑,我从哪里去获取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 makeImage() {
    final c = Completer();
    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对象后,需要调用CanvasdrawImage方法来绘制,这里使用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. 调用CanvasdrawImage方法绘制像素数据
  4. 使用Ticker对象获取每一帧更新的时机,并通知CustomPainter去重绘

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

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

发表评论

邮箱地址不会被公开。 必填项已用*标注