Flutter - более эффективный панорамирование и масштабирование для CustomPaint

Question

Я рендерил коллекцию сеток плиток, где каждая плитка извлекается из изображения.Чтобы отобразить это, я отображаю все внутри моей собственной реализации CustomPainter (потому что сетки могут быть довольно большими).Чтобы поддерживать функции панорамирования и масштабирования, я решил выполнить смещение и масштабирование как часть рисования на холсте.

Вот часть моей пользовательской реализации рисования.

  @override
  void paint(Canvas canvas, Size size) {
    // With the new canvas size, we may have new constraints on min/max offset/scale.
    zoom.adjust(
      containerSize: size,
      contentSize: Size(
        (cellWidth * columnCount).toDouble(),
        (cellHeight * rowCount).toDouble(),
      ),
    );

    canvas.save();
    canvas.translate(zoom.offset.dx, zoom.offset.dy);
    canvas.scale(zoom.scale);

    // Now, draw the background image and grids.

Пока это работаетпроизводительность может начать ухудшаться после того, как будет отображено достаточное количество ячеек (например, сетка 100x100 вызывает некоторое отставание при каждом обратном вызове GestureDetector, который обновляет значения масштабирования).И поскольку смещение и масштабирование выполняются в CustomPaint, я в принципе не могу вернуть false для bool shouldRepaint(MyPainter old), потому что ему нужно перекрасить, чтобы отобразить его новое смещение и масштаб.

Итак, мой вопрос: каков более эффективный способ решения этой проблемы?

Я пробовал другой подход:

var separateRenderTree = RepaintBoundary(
  child: OverflowBox(
    child: CustomPaint(
      painter: MyPainter(),
    ),
  ),
);
return Transform(
  transform: Matrix4.translationValues(_zoom.offset.dx, _zoom.offset.dy, 0)..scale(_zoom.scale),
  child: separateRenderTree,
);

Это также работает, но также можетстановится медленным при масштабировании (перевод плавный, плавный).

Итак, еще раз, каков правильный подход к этой проблеме?

Спасибо.

Answer 1

Вот где я остановился.

Размер моего настраиваемого рисовальщика должен быть настолько большим, насколько ему нужно, а затем я помещаю его в виджет «Преобразование» (верхний левый угол выравнивается со смещением нуля)..

Поверх этого виджета я наложил невидимый виджет, который управляет сенсорным вводом.Используя GestureDetector, он будет реагировать на события и уведомлять виджет Transform об обновлении.

После официального перемещения панорамирования / масштабирования из средства рисования я затем реализовал функцию "shouldRepaint", чтобы сделать ее более строгой.

Это позволило мне рендерить очень, очень большие сетки на достаточно хороших скоростях.