5

我正在使用 Flutter 创建一个笔记应用程序,并使用 CustomPainter 作为绘图部分。为了获得更好的性能,CustomPaint 会在一些 Lines 之后转换为图像。现在图像的问题是放大时,线条(现在是图像)非常像素化。现在我解决这个问题的第一个想法是在缩放后重新绘制线条。

但是,如果它们的分辨率仍然很差,我该如何正确地重绘它们呢?另外,是否可以只重绘当前在屏幕上可见的线条?

一切都用提供约束+像素比(比例)的布局构建器包装:

    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());
    }

(对不起大量的代码)

如果您知道更好的方法,请告诉我。

这是问题的视频

4

0 回答 0