Flutter - 在 CustomPainter 中重用以前绘制的 Canvas

Question

我有一个 CustomPainter，我想每隔几毫秒渲染一些项目。但我只想渲染自上次绘制以来发生变化的项目。我计划手动清除将在该区域内更改和重绘的区域。问题是每次调用paint() 时，Flutter 中的 Canvas 似乎都是全新的。我知道我可以跟踪整个状态并每次都重绘所有内容，但出于性能原因和特定用例并不可取。以下是可能代表该问题的示例代码:
我知道当 Canvas 大小改变时，一切都需要重新绘制。

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

class CanvasWidget extends StatefulWidget {
  CanvasWidget({Key key}) : super(key: key);

  @override
  _CanvasWidgetState createState() => _CanvasWidgetState();
}

class _CanvasWidgetState extends State<CanvasWidget> {
  final _repaint = ValueNotifier<int>(0);
  TestingPainter _wavePainter;

  @override
  void initState() {
    _wavePainter = TestingPainter(repaint: _repaint);
    Timer.periodic( Duration(milliseconds: 50), (Timer timer) {
      _repaint.value++;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
       painter: _wavePainter,
    );
  }
}

class TestingPainter extends CustomPainter {
  static const double _numberPixelsToDraw = 3;
  final _rng = Random();

  double _currentX = 0;
  double _currentY = 0;

  TestingPainter({Listenable repaint}): super(repaint: repaint);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.transparent;
    if(_currentX + _numberPixelsToDraw > size.width)
    {
      _currentX = 0;
    }

    // Clear previously drawn points
    var clearArea = Rect.fromLTWH(_currentX, 0, _numberPixelsToDraw, size.height);
    canvas.drawRect(clearArea, paint);

    Path path = Path();
    path.moveTo(_currentX, _currentY);
    for(int i = 0; i < _numberPixelsToDraw; i++)
    {
      _currentX++;
      _currentY = _rng.nextInt(size.height.toInt()).toDouble();
      path.lineTo(_currentX, _currentY);
    }

    // Draw new points in red    
    paint.color = Colors.red;
    canvas.drawPath(path, paint);
  }

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

Answer 1

重绘整个 Canvas ，即使在每一帧 ，是完全有效的。尝试重用前一帧通常不会更有效率。
查看您发布的代码，有些地方有改进的余地，但尝试保留 Canvas 的一部分不应该是其中之一。
您遇到的真正性能问题是反复更改 ValueNotifier来自 Timer.periodic事件，每 50 毫秒。处理每一帧重绘的更好方法是使用 AnimatedBuilder与 vsync ，所以 paint CustomPainter的方法将在每一帧上调用。这类似于 Window.requestAnimationFrame在网络浏览器世界中，如果您熟悉的话。这里vsync如果您熟悉计算机图形的工作原理，则代表“垂直同步”。基本上，您的 paint方法将在 60 Hz 屏幕的设备上每秒调用 60 次，在 120 Hz 屏幕上每秒绘制 120 次。这是在不同类型的设备上实现流畅动画的正确且可扩展的方法。
在考虑保留部分 Canvas 之前，还有其他值得优化的领域。例如，简单地看一下你的代码，你有这样一行:

_currentY = _rng.nextInt(size.height.toInt()).toDouble();

在这里，我假设您希望在 0 之间有一个随机小数和 size.height ，如果是这样，你可以简单地写 _rng.nextDouble() * size.height , 而不是将 double 转换为 int 并再次返回，并且(可能无意中)在该过程中对其进行舍入。但是从这些东西中获得的性能增益可以忽略不计。
想一想，如果一个 3D 视频游戏可以在手机上流畅地运行，每一帧都与前一帧有很大的不同，那么你的动画应该可以流畅地运行，而不必担心手动清除 Canvas 的一部分。尝试手动优化 Canvas 可能会导致性能下降。
所以，你真正应该关注的是使用 AnimatedBuilder而不是 Timer触发项目中的 Canvas 重绘，作为起点。
例如，这是我使用 AnimatedBuilder 和 CustomPaint 制作的一个小演示:

完整源代码:

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  List<SnowFlake> snowflakes = List.generate(100, (index) => SnowFlake());
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.blue, Colors.lightBlue, Colors.white],
            stops: [0, 0.7, 0.95],
          ),
        ),
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, __) {
            snowflakes.forEach((snow) => snow.fall());
            return CustomPaint(
              painter: MyPainter(snowflakes),
            );
          },
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final List<SnowFlake> snowflakes;

  MyPainter(this.snowflakes);

  @override
  void paint(Canvas canvas, Size size) {
    final w = size.width;
    final h = size.height;
    final c = size.center(Offset.zero);

    final whitePaint = Paint()..color = Colors.white;

    canvas.drawCircle(c - Offset(0, -h * 0.165), w / 6, whitePaint);
    canvas.drawOval(
        Rect.fromCenter(
          center: c - Offset(0, -h * 0.35),
          width: w * 0.5,
          height: w * 0.6,
        ),
        whitePaint);

    snowflakes.forEach((snow) =>
        canvas.drawCircle(Offset(snow.x, snow.y), snow.radius, whitePaint));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class SnowFlake {
  double x = Random().nextDouble() * 400;
  double y = Random().nextDouble() * 800;
  double radius = Random().nextDouble() * 2 + 2;
  double velocity = Random().nextDouble() * 4 + 2;

  SnowFlake();

  fall() {
    y += velocity;
    if (y > 800) {
      x = Random().nextDouble() * 400;
      y = 10;
      radius = Random().nextDouble() * 2 + 2;
      velocity = Random().nextDouble() * 4 + 2;
    }
  }
}

在这里，我生成了 100 个雪花，每帧重绘整个屏幕。您可以轻松地将雪花的数量更改为 1000 或更高，它仍然会运行得非常流畅。在这里，我也没有像我应该的那样使用设备屏幕大小，正如你所看到的，有一些硬编码的值，比如 400 或 800。无论如何，希望这个演示能让你对 Flutter 的图形引擎有一些信心。 :)
这是另一个(较小的)示例，向您展示了在 Flutter 中使用 Canvas 和动画所需的一切。遵循以下可能更容易:

import 'package:flutter/material.dart';

void main() {
  runApp(DemoWidget());
}

class DemoWidget extends StatefulWidget {
  @override
  _DemoWidgetState createState() => _DemoWidgetState();
}

class _DemoWidgetState extends State<DemoWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, __) => CustomPaint(
        painter: MyPainter(_controller.value),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final double value;

  MyPainter(this.value);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      value * size.shortestSide,
      Paint()..color = Colors.blue,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}