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

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

使用 canvas.translate 方法移动 canvas 表面，这样您的绘图调用就可以始终在屏幕边界内。您还需要更改 drawLine 调用以适应 canvas 的移动方式。

Answer 2

我所做的是在某个条件匹配时创建回调，并从该回调调用 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++;
                                  },
                                );
                              },
                            );
       }
  )
)

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

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

Custom painter painting outside of the screen for new incoming data?

waveform

dart

flutter

flutter-custompainter