使用颤振绘制路径时出现奇怪的性能问题

时间:2019-08-15 09:31:35

标签: flutter dart flutter-animation

我试图在CustomPaint上绘制一些指向三角形,并且当我改变三角形的形状时遇到性能问题。如果执行当前代码,则刷新速度很快。

如果您更改零件偏移量(x,y + 8),而使用偏移量(x,y + 4),则三角形形状会略有变化,但性能会下降而且刷新率很差。

有人知道为什么会发生这种情况吗,我该如何解决这个问题?

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

void main() =>
    runApp(
        MaterialApp(
          title: 'Demo',
          home: Scaffold(
            body: Shapes()
          ),
        )
    );


class Shapes extends StatefulWidget {
  @override
  _ShapesState createState() => new _ShapesState();
}

class _ShapesState extends State<Shapes> with SingleTickerProviderStateMixin{
  Animation<double> animation;
  AnimationController animationController;


  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..addListener(() => setState(() {}));
    animation = Tween<double>(
      begin: 50.0,
      end: 120.0,
    ).animate(animationController);

    animationController.forward();

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        animationController.repeat();
      }
    });
  }

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

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.strokeWidth = 2;

    for (var i = 0; i < 1000; i++) {
      Math.Random rnd = new Math.Random();
      double x = 5 + rnd.nextInt(300 - 5).toDouble();
      double y = 5 + rnd.nextInt(1200 - 5).toDouble();

      final Path path = Path();
      path.addPolygon([
        Offset(x+6,y+8),
        Offset(x,y+-8),
        Offset(x-6,y+8),
        Offset(x,y+8),
      ], true);

      paint.color = Color(0xFF3f6cbf);
      paint.style = PaintingStyle.stroke;
      canvas.drawPath(path, paint);

      paint.color = Color.fromARGB(255, 255, 0, 0);
      paint.style = PaintingStyle.fill;
      canvas.drawPath(path, paint);

    }

  }

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

0 个答案:

没有答案