Flutter 使用 custompainter 实现绘图游戏（如画图）的有效方法

Question

我正在尝试构建一个类似 pictionary 的绘图游戏，其中一个用户将在屏幕上绘制一个对象，而其他用户可以在他们的设备上实时看到绘图。我的想法是使用自定义画家在画布上绘制，当用户使用 websocket 向正在观看的其他用户发送点绘制发射事件时。并在他们的屏幕上绘制接收到的点。

但我面临的问题是使用自定义画家 canvas.drawlines() 进行绘制效率非常低，并且在一段时间后开始滞后。 我注意到的主要问题是，每当向画布添加新点时，自定义画家都会再次重绘所有点。因此，如果画布上至少有 1000 个点，性能就会受到严重影响。

我尝试了 provider 和 notifyListeners() 而不是 setState()，这稍微提高了性能，但是当我使用具有大量点的 websocket 发出事件时，应用程序变得不可用并且帧速率下降到 10fps 以下。

我想知道的是，是否可以使用 custompainter 绘制新添加的点而不重绘整个画布。如果这是可能的，那么我就可以通过只向所有观察者发送新点来逃脱。

如果行为不可行，使用 custompainter 和 websockets 是否有一个高效的 Flutter 整个工作流程。

这是我的 SketchPainter 类

class SketchPainter extends CustomPainter {
  final List<Point> offsets;
  final double strokeWidth;
  final Color strokeColor;
  SketchPainter({@required this.offsets, @required this.strokeWidth, @required this.strokeColor});


  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
    ..isAntiAlias = true;
    for(int i = 0; i < offsets.length - 1; i++) {
      if(offsets[i] != null){
        paint.color = offsets[i].color;
        paint.strokeWidth = offsets[i].width;
      }
      if(offsets[i] != null && offsets[i + 1] != null) {
        canvas.drawLine(offsets[i].offset, offsets[i+1].offset, paint);
      }
      if(offsets[i] != null && offsets[i + 1] == null) {
        canvas.drawPoints(PointMode.points, [offsets[i].offset], paint);
      }
    }
  }

  @override
  bool shouldRepaint(SketchPainter oldDelegate) {
    return true;
  }
}

这是我的 Point 类

class Point {
  Offset offset;
  Color color;
  double width;
  Point({this.offset, this.color, this.width});
}

Answer 1

一种解决方案可能是“流式传输”画布的图片，有点像视频。您是否已经尝试过painter 包？它可以帮助您做到这一点并改善绘图体验。