英文:
How to draw a trapezoid shape line in flutter using Rrect or similar?
问题
我想在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:
Now I am drawing an elliptical shape using Rrect for the same,
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论