如何使用 Rrect 或类似工具在 flutter 中绘制梯形线

发布于01月09日

我想在Flutter 中画一个梯形，就像这样:

现在，我正在使用Rrect绘制一个椭圆形状，

下面是我绘制第二张图片的代码(获得一个椭圆形)

 @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size!.width / 2, cfg.size!.height + 8);
    canvas.drawRRect(
        RRect.fromRectAndRadius(
          Rect.fromCenter(center: circleOffset, width: 50, height: 5),
          Radius.circular(radius),
        ),
        _paint);
  }

推荐答案

使用Rrect.FromRectAndCorners，

  {
    Radius topLeft = Radius.circular(10),
    ///top left corner curve or radius, in my case it is 10
    Radius topRight = Radius.circular(10),
    ///top right corner curve or radius, in my case it is 10
    Radius bottomRight = Radius.zero,
    ///bottom left corner curve or radius, in my case it is zero
    Radius bottomLeft = Radius.zero
    ///bottom right corner curve or radius, in my case it is zero
  }

因此，我的最终代码如下所示

@override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size!.width / 2, cfg.size!.height + 8);
    canvas.drawRRect(
      RRect.fromRectAndCorners(
        Rect.fromCenter(center: circleOffset, width: 50, height: 5),
        bottomLeft: Radius.zero,
        bottomRight: Radius.zero,
        topLeft: Radius.circular(radius),
        topRight: Radius.circular(radius),
      ),
      _paint,
    );
  }

将在文档here中获得更多详细信息

https://api.flutter.dev/flutter/dart-ui/RRect/RRect.fromRectAndCorners.html个

谢谢你的帮助.