performance - Flutter - CustomPaint 更高效的平移和缩放

Question

我正在渲染一组图 block 网格，其中每个图 block 都是从图像中提取的。为了渲染它，我在我自己的 CustomPainter 实现中渲染所有内容(因为网格可能会变得非常大)。为了支持平移和缩放功能，我选择将偏移和缩放作为 Canvas 绘画的一部分。

这是我的自定义绘画实现的一部分。

  @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 中完成的，所以我基本上无法为 bool shouldRepaint(MyPainter old) 返回 false 因为它需要重新绘制以呈现新的偏移和比例。

所以，我的问题是:解决这个问题的更高效的方法是什么？

我尝试了另一种方法:

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”功能以更加严格。

这使我能够以足够好的速度渲染非常非常大的网格。