_finishOverlay = await createFinishOverlay();
Future<Image> createFinishOverlay() {
final recorder = PictureRecorder();
final canvas = Canvas(recorder, _scaledRect);
final step = _scaledRect.width / 2;
final black = BasicPalette.black.paint();
for (var i = 0; i * step < _scaledRect.height; i++) {
canvas.drawRect(
Rect.fromLTWH(i.isEven ? 0 : step, i * step, step, step),
black,
);
}
final picture = recorder.endRecording();
return picture.toImage(
_scaledRect.width.toInt(),
_scaledRect.height.toInt(),
);
}
canvas.drawImageRect(_finishOverlay!, _scaledRect, _drawRect, paint);
这部分代码是官方demo中绘制如下内容的代码
主要就是创建 PictureRecorder Canvas 类似于一个画布,在画布上绘制,绘制完成之后,转换成Image对象,最后再绘制到指定的画布。
除了画布的功能这里的精髓还是在这个for循环。
for (var i = 0; i * step < _scaledRect.height; i++) {
像这种大量for循环的绘制逻辑,单独拿出来使用PictureRecorder进行绘制,就可以避免每次刷新的时候都执行for循环。