-1

我正在学习 Flutter 中的自定义画家，并一直致力于创建一个我可以制作动画的指南针。我采用的方法是使用循环来输出 x,y 偏移坐标，如下面的代码所示。我正在运行代码块 3 次，一次有 360 个周期（1 度），一个有 16 个周期（22.5 度），一个有 4 个周期（90 度）。当我在调试模式下渲染自定义画家时，我没有性能问题，但我想知道其他人的意见是什么。创建这样的图像然后对其进行动画处理会不会在计算机上过于繁重？

class Compass extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paintStrokeThin = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..color = Colors.black;
    final paintStrokeNormal = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.5
      ..color = Colors.black;
    final paintStrokeThick = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0
      ..color = Colors.black;
    createCompass(
      outerDistanceFromEdge: 10.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 360,
      paint: paintStrokeThin,
      size: size,
      canvas: canvas,
    );
    createCompass(
      outerDistanceFromEdge: 5.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 16,
      paint: paintStrokeNormal,
      size: size,
      canvas: canvas,
    );
    createCompass(
      outerDistanceFromEdge: 0.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 4,
      paint: paintStrokeThick,
      size: size,
      canvas: canvas,
    );
  }

  void createCompass(
      {double outerDistanceFromEdge,
      double innerDistanceFromEdge,
      int noOfPoints,
      Paint paint,
      Canvas canvas,
      Size size}) {
    final _width = size.width;
    final _height = size.height;
    final _interval = (360 / noOfPoints) * (pi / 180);

    for (var i = 1; i <= noOfPoints; i++) {
      var rad = i * _interval;
      var x1 = (0.5 * _width - outerDistanceFromEdge) * sin(rad) + 0.5 * _width;
      var x2 =
          (0.5 * _width - innerDistanceFromEdge) * sin(rad) + 0.5 * _height;
      var y1 =
          (0.5 * _height - outerDistanceFromEdge) * cos(rad) + 0.5 * _width;
      var y2 =
          (0.5 * _height - innerDistanceFromEdge) * cos(rad) + 0.5 * _height;
      canvas.drawLine(Offset(x1, y1), Offset(x2, y2), paint);
    }
  }

  @override
  bool shouldRepaint(Compass oldDelegate) => false;
}
4

1 回答 1

0

与任何编程语言一样，循环是调用昂贵的函数，尤其是在 UI 上渲染时（动画、小部件等）。我建议您打开性能叠加层并检查该小部件的渲染成本。

一个简单但关键的规则是尽量减少使用昂贵的小部件，因此请考虑是否真的需要运行代码块 3 次或制作动画。看看这个来自 Fluter 团队的长而重要的视频。

最后，当您询问意见时，生产应用程序的复杂动画 不是一个好主意，尤其是当您独自工作时！

于 2020-11-13T08:27:40.577 回答