如何在Flutter中使用RRect或类似方法绘制梯形形状的线?

huangapple go评论83阅读模式
英文:

How to draw a trapezoid shape line in flutter using Rrect or similar?

问题

我想在Flutter中绘制一个梯形形状,就像这样:

如何在Flutter中使用RRect或类似方法绘制梯形形状的线?

现在我正在使用Rrect绘制一个椭圆形状,与之类似,

如何在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);
  }
英文:

I want to draw a trapezoidal shape in flutter, like this:

如何在Flutter中使用RRect或类似方法绘制梯形形状的线?

Now I am drawing an elliptical shape using Rrect for the same,

如何在Flutter中使用RRect或类似方法绘制梯形形状的线?

here is my code for drawing the second picture(getting an elliptical shape)

 @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);
  }

答案1

得分: 0

使用RRect.fromRectAndCorners
```Rect rect,
  {
    Radius topLeft = Radius.circular(10),
    ///左上角的曲线或半径,我的情况下是10
    Radius topRight = Radius.circular(10),
    ///右上角的曲线或半径,我的情况下是10
    Radius bottomRight = Radius.zero,
    ///右下角的曲线或半径,我的情况下是零
    Radius bottomLeft = Radius.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,
    );
  }

可以在文档这里中找到更多详细信息。


<details>
<summary>英文:</summary>

using Rrect.fromRectAndCorners, 
```Rect rect,
  {
    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
  }

so my final code looks like

@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,
    );
  }

will get more details in the documentation here

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

Thanks for help.

huangapple
  • 本文由 发表于 2023年1月9日 15:21:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75054178.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定