FlutterでJavaScriptのquadraticCurveToとbezierCurveTo

メモです。
結論から言えば
quadraticCurveTo => quadraticBezierTo
bezierCurveTo=> cubicTo

https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
のコードを参考。

コード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Container(
      color: Colors.white,
      child: CustomPaint(
        painter: CirclePainter(),
        child: Container(
          height: 500,
        ),
      ),
    ));
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 円（外線）

    final quadraticBezierTo = Path()
      ..moveTo(75, 25)
      ..quadraticBezierTo(25, 25, 25, 62.5)
      ..quadraticBezierTo(25, 100, 50, 100)
      ..quadraticBezierTo(50, 120, 30, 125)
      ..quadraticBezierTo(60, 120, 65, 100)
      ..quadraticBezierTo(125, 100, 125, 62.5)
      ..quadraticBezierTo(125, 25, 75, 25);

    canvas.drawPath(
        quadraticBezierTo,
        Paint()
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);

    final cubicTo = Path()
      ..moveTo(75, 40)
      ..cubicTo(75, 37, 70, 25, 50, 25)
      ..cubicTo(20, 25, 20, 62.5, 20, 62.5)
      ..cubicTo(20, 80, 40, 102, 75, 120)
      ..cubicTo(110, 102, 130, 80, 130, 62.5)
      ..cubicTo(130, 62.5, 130, 25, 100, 25)
      ..cubicTo(85, 25, 75, 37, 75, 40);

    canvas.drawPath(
        cubicTo,
        Paint()
          ..color = Colors.blue
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1);
  }

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

結果: