[Impeller] implement Canvas::DrawLine to tesselate lines directly

[flar]

Impeller implements the DrawLine primitive as DrawPath on a path containing a single line. Benchmarks show that this can cost 30% overhead on apps that use a lot of DrawLine primitives. This PR creates a more direct Entity that can tesselate the geometry of a line directly.

The reduced overhead should help with flutter/flutter#138004

The current code will back off to Path rendering for round caps. When the circle geometry work is finished (#47845) we can come back and implement round caps using the code refactored in that PR.

[flar]

Here are some benchmarks I ran on an iPhone 6s using the example below. All times are the raster time average ms/frame on a profile build with LTO measured with the Performance Overlay with 10,000 lines per frame.

Running on Impeller now: 101
Running on Skia now: 17.2
Running on Impeller with this fix: 66

Test benchmark

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter DrawLine Basher'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  List<Offset> points = List<Offset>.filled(10000, Offset.zero);
  int highlight = 0;
  late AnimationController _controller;

  static double W = 300;
  static double H = 300;

  @override
  void initState() {
    super.initState();
    Random r = Random();
    for (int i = 0; i < points.length; i++) {
      points[i] = Offset(r.nextDouble() * W, r.nextDouble() * H);
    }
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    );
    _controller.addListener(() {
      setState(() {
        highlight++;
        if (highlight >= points.length) {
          highlight = 0;
        }
      });
    });
    _controller.repeat(reverse: false);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomPaint(
              size: Size(W, H),
              painter: _MyPainter(points: points, highlight: highlight),
            ),
          ],
        ),
      ),
    );
  }
}

class _MyPainter extends CustomPainter {
  List<Offset> points;
  int highlight;

  _MyPainter({required this.points, this.highlight = -1});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 1
      ..strokeCap = StrokeCap.butt;
    Paint highlightPaint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4
      ..strokeCap = StrokeCap.square;
    for (int i = 1; i < points.length; i++) {
      if (i - 1 != highlight) {
        canvas.drawLine(points[i-1], points[i], paint);
      }
    }
    if (highlight > 0 && highlight < points.length) {
      canvas.drawLine(points[highlight-1], points[highlight], highlightPaint);
    }
  }

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

[jonahwilliams]

As much of an improvement this is, Skia is still just so much better. I suspec what they're doing is some amount of batching either during cmd recording or playback?

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

Changes reported for pull request #47846 at sha 07cdfbd

[jonahwilliams]

LGTM with nits

[jonahwilliams]

I think if you're drawing a line, its only an axis aligned rect if it is a square cap?

[flar]

square or butt, I'll include this in the issue for handling round caps...

[jonahwilliams]

Nit: file an issue for round caps

[flar]

Done: flutter/flutter#138254