dart 如何绘制自定义形状使用贝塞尔曲线在FlutterCustomPainter？

yqlxgs2m 于 2023-03-15 发布在 Flutter

关注(0)|答案(1)|浏览(133)

我正在尝试使用flutter customPainter库和二次贝塞尔曲线绘制下面的图片。我该如何绘制这个形状？

我的密码：

@override
  void paint(Canvas canvas, Size size) {
  
    var paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill; // Change this to fill

    final path = Path();

    path.moveTo(-5, size.height / 2);
    path.quadraticBezierTo(
      size.width / 2,
      -50,
      size.width + 5,
      size.height / 2,
    );
    path.close();

    canvas.drawPath(path, paint);

  }

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

dart

来源：https://stackoverflow.com/questions/67869776/how-to-draw-custom-shapes-using-bezier-curves-in-a-flutter-custompainter

1条答案

按热度按时间

2ul0zpep1#

我有点晚了，但这可能会有利于某人在未来。你正在尝试做的是创建3曲线_两个是凹的和meddle一个是凸的。但在你的代码中，你只有一条曲线，要解决这个问题，添加两个更多的quadraticBezier我使用Kotlin的“f”后，每个数字是浮点值我不知道它是否是相同的 dart ，但你可以计算出来：

final path = Path();

    path.moveTo(0f,0f);
    path.lineTo(0f,size.height);

    path.quadraticBezierTo(0f,4f/5f*size.height,size.width/4f,3f/5f*size.height)
    path.quadraticBezierTo(0.3f * size.width,0.5f * size.height,size.width/4f,2f/5f*size.height)
    path.quadraticBezierTo(0f ,1f/5f*size.height,0f,0f)
    path.close();

    canvas.drawPath(path, paint);

赞(0）回复(0）举报 2023-03-15

我来回答

dart 如何绘制自定义形状使用贝塞尔曲线在FlutterCustomPainter？

1条答案

相关问题

热门标签

最新问答