flutter - 自定义画家在屏幕外绘制新传入数据？

Question

我正在我的应用程序中为麦克风实现波形可视化。

class BarVisualizer extends CustomPainter {
  final List<double> waveData;
BarVisualizer({
    required this.waveData,
});
 @override
  void paint(Canvas canvas, Size size) {
    for (var i = 0; i < waveData.length; i++) {
    canvas.drawLine(Offset(i.toDouble() + i  , 0),
          Offset(i.toDouble() +  i, -waveData[i]), wavePaint);     
    }
  }
@override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

上面for-loop为我从麦克风获得的每个分贝值画线。当我使用麦克风获取数据时，分贝列表会变大，并开始在屏幕外绘制。

所以我的问题是如何将之前绘制的线条移回屏幕内以绘制新的传入分贝值？

Answer 1

我所做的是在某个条件匹配时创建一个回调，并从该回调调用 setState 到看起来像这样的偏移量，

for (var i = 0; i < waveData.length; i++) {
if ((spacing * i) + offset.dx > size.width * sizeCounter) {
          callback();
        }
        canvas.drawLine(
            Offset(-scrollOffset.dx + offset.dx + (spacing * i), 100),
            Offset(-scrollOffset.dx + offset.dx + (spacing * i),
                -waveData[i] + 100),
            wavePaint);
      }

现在在 UI 中，

CustomPaint(
     painter: Barpainter(
              callback:(){
                WidgetsBinding.instance!.addPostFrameCallback(
                                  (timeStamp) {
                                setState(
                                      () {
                                    scrollOffset +=  Offset(width, 0);
                                    sizeCounter++;
                                  },
                                );
                              },
                            );
       }
  )
)

这会在到达屏幕末尾时添加额外的偏移量

Answer 2

使用该canvas.translate方法移动画布表面，以便您的绘图调用始终在屏幕范围内。您还需要更改drawLine调用以适应画布的移动方式。