flutter 使用canvas实现一个梯形

创建一个工具类import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';/*首先使用 moveTo 方法移动到左上角，然后使用 lineTo 方法依次连接四个点形成一个梯形，最后使用 close 方法闭合路径。在 paint 方法中，我们使用 Canvas 对象的 drawPath 方法绘制这个梯形。*/class TrapeziumPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Color.fromRGBO(235, 112, 3, 1);// final path = Path()// ..moveTo(0, 0)// ..lineTo(size.width * 0.8, 0.2)// // 添加当前点到目标点（x，y）构成的直线到pathrLineTo(float dx, float dy) // // //基于当前坐标系，即以path最后的那个点//为坐标系原点（0,0）// // ，如果前面没有path的点，默认是屏幕左上角（0,0）// ..lineTo(size.width *0.8, size.height)// ..lineTo(size.width * 0.4, size.height*0.2)// ..close();Path path=Path(); path..relativeMoveTo(0, 0) //左上,..relativeLineTo(350.w, 0) //右上,这里的横坐标和纵坐标都是根据上一个点来的，比如上一个点是10,20，那么下一个点就是根据10,20来，而不是0,0来..relativeLineTo(-40, 60)//右下..relativeLineTo(-140,0);//左下canvas.drawPath(path, paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}}

在页面中使用TrapeziumPainter() 就可以生成了

Container(width: 350.w,height: 90.w,child: CustomPaint(painter: TrapeziumPainter(),),)

效果图如下