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);
至此，整个流程已经走通，共分为三步：
- 生成像素数据
- 调用
decodeImageFromPixels方法将像素数据转换为Image对象 - 调用
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对象，这里有两个地方需要重点关注一下：
shouldRepaint方法表示如果上层组件发生重建，生成了新的CustomPaint对象，是否需要重新调用paint方法绘制内容，因为我的需求是每一帧都要绘制新的画面，所以这里直接返回true（表示需要重新调用paint方法），真实的业务场景需要根据具体情况去判断是否返回true构造函数中有一个
_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中如何实时绘制自己生成的像素数据，有以下几个步骤：
- 生成像素数据
- 调用
decodeImageFromPixels方法将像素数据转换为Image对象 - 调用
Canvas的drawImage方法绘制像素数据 - 使用
Ticker对象获取每一帧更新的时机，并通知CustomPainter去重绘
如果有错误，还请大家帮忙指正, 希望能够对大家有所帮助
作者：RobertLee10396
链接：https://juejin.cn/post/7129170601238855694
