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

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

Flutter-更有效的平移和缩放CustomPaint

1 个答案: