如何在Flutter CustomPainter中使用贝塞尔曲线绘制形状

rn0zuynd 于 2022-12-30 发布在 Flutter

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

我正在尝试用flutter customPainter库绘制下面的图片。我该如何绘制这个形状？

我的代码和结果

import 'package:flutter/material.dart';

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = new Paint();
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill;

    var path = new Path();
    path.lineTo(0, size.height * 0.3);

    path.quadraticBezierTo(size.width * 0.35, size.height * 0.4, size.width * 0.7, size.height * 0.21);
    path.quadraticBezierTo(size.width * 0.6, size.height * 0.19, size.width * 0.9, size.height * 0.15);
    path.quadraticBezierTo(size.width , size.height * 0.05, size.width * 0.6, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

flutter

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

1条答案

按热度按时间

fcy6dtqo1#

您选择的贝塞尔曲线不正确。
这里我举例说明我在哪里应用了哪些曲线。黄点是 * 起点和终点 *，黑点代表 * 控制点 *。
在代码中，我从左到右（从上到下），使用arcToPoint代替conicTo，因为arcToPoint效果更好。

这只是一个 * 粗略的草图 *，即比例是完全关闭，但至少我可以分享适当的贝塞尔曲线您应该使用，以实现您想要的输出。

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.red[800]
    ..style = PaintingStyle.fill;

  final path = new Path()
    ..moveTo(size.width * .6, 0)
    ..quadraticBezierTo(
    size.width * .7,
    size.height * .08,
    size.width * .9,
    size.height * .05,
  )
    ..arcToPoint(
    Offset(
      size.width * .93,
      size.height * .15,
    ),
    radius: Radius.circular(size.height * .05),
    largeArc: true,
  )
    ..cubicTo(
    size.width * .6,
    size.height * .15,
    size.width * .5,
    size.height * .46,
    0,
    size.height * .3,
  )
    ..lineTo(0, 0)
    ..close();

  canvas.drawPath(path, paint);
}

注意，我更新了语法，使用..级联表示法和final关键字表示变量。

赞(0）回复(0）举报 2022-12-30

我来回答

如何在Flutter CustomPainter中使用贝塞尔曲线绘制形状

1条答案

相关问题

热门标签

最新问答