如何在 Flutter 中重新光栅化图像？

编程问答 2022-09-23

问题描述

我正在使用 Flutter 创建一个笔记应用程序，我使用 CustomPainter 作为绘图部分。为了获得更好的性能，CustomPaint 在一些 Lines 之后被转换成一个图像。现在图像的问题是放大时，线条（现在是图像）非常像素化。如何在放大的同时保持良好的分辨率？我听说我可以在缩放时重新光栅化场景，或者从一开始就以高分辨率光栅化所有内容。

但是我如何使用颤振（重新）光栅化图像？ 我正在下面添加我的应用程序的一些相关代码，如果缺少重要内容，请告诉我：

一切都用一个 layoutbuilder 包装，它提供了约束 + 像素比（比例）：

    LayoutBuilder(builder: (context,constraints) {
          size = constraints.biggest;
          scale = MediaQuery.of(context).devicePixelRatio;

我是如何进行缩放的：

                  GestureDetector(
                    onScaleStart: (details) {
                      _initialFocalPoint = details.focalPoint;
                      _initialScale = _scale;
                    },onScaleUpdate: (details) {
                      setState(() {
                        _sessionOffset =
                            details.focalPoint - _initialFocalPoint;

                        _scale = _initialScale * details.scale;
                      });
                    },onScaleEnd: (details) {
                      setState(() {
                        _offset += _sessionOffset;
                        _sessionOffset = Offset.zero;
                      });
                    },child: Transform.translate(
                        offset: _offset + _sessionOffset,child: Transform.scale(
                          scale: _scale,child: ....

我的 CustomPaint 出现在 Transform 小部件之后：

                               CustomPaint(
                                  size: size!,willChange: true,painter: DrawingViewPainter(
                                      pointsList: drawingNotifier.points,image: image
                                  ),);

带有 custpmpaint 到图像转换器的代码段（绘制的线被转换为图像以节省性能）：

  ui.PictureRecorder recorder = ui.PictureRecorder();
  Canvas canvas = ui.Canvas(recorder);
  canvas.scale(scale!);

  DrawingViewPainter(image: image,pointsList: points).paint(canvas,size!);
  ui.Picture picture = recorder.endRecording();
  ui.Image newImage = await picture.toImage(
    (size!.width * scale!).ceil(),(size!.height * scale!).ceil(),);
......
image = newImage

带有图像抽屉的 Custompaint 部分：

canvas.drawImageRect(
          image!,Offset.zero & Size(image!.width.todouble(),image!.height.todouble()),Offset.zero & size,Paint());
    }

（抱歉代码量太大）

如果你知道更好的方法，也请告诉我。 这是问题的视频： https://imgur.com/sFM9bMu

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

custom-paintingdartflutter-imageraster