Flutter: перерисовывать линии Custompaint после изменения масштаба

Я создаю приложение для заметок с помощью Flutter и использую CustomPainter для рисования. Для лучшей производительности CustomPaint преобразуется в изображение после нескольких строк. Теперь проблема с изображениями заключается в том, что при увеличении масштаба линии (которые сейчас являются изображениями) очень пикселизированы. Моя первая идея решить эту проблему - перерисовать линии после масштабирования.

Но как мне их правильно перерисовать, чтобы у них все еще не было плохого разрешения? Кроме того, можно ли перерисовать только те строки, которые в данный момент видны на экране?

все обернуто компоновщиком макетов, который предоставляет ограничения + соотношение пикселей (масштаб):

          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 to image (нарисованные линии преобразуются в изображения для экономии производительности):

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

(извините за огромное количество кода)

Если вы знаете способ получше, дайте мне знать.

Вот видео проблемы

0 ответов

Другие вопросы по тегам