flutter - Flutter：如何在容器内绘制垂直正弦波？

Question

我怎样才能在颤动的容器中画出这样的东西？PS我是新手。提前致谢。

Answer 1

你可以试试这个，这个想法是使用多个quadraticBezierTo. 请记住，B、C、D 应该在同一条线上以使关节平滑：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 700,
            color: Colors.yellow,
            child: CustomPaint(painter: FaceOutlinePainter()),
          ),
        ),
      ),
    );
  }
}

class FaceOutlinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    Path path = Path();
    path.moveTo(size.width / 2, 0); //Ax, Ay
    path.quadraticBezierTo(size.width, size.height / 8, size.width / 2, size.height / 4); //Bx, By, Cx, Cy
    path.quadraticBezierTo(0, 3 * size.height / 8, size.width / 2, size.height / 2); //Dx, Dy, Ex, Ey
    canvas.drawPath(path, paint);
  }

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