flutter 使用canvas实现一个梯形

2023-12-13 05:50:52
创建一个工具类
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
/*
首先使用 moveTo 方法移动到左上角,然后使用 lineTo 方法依次连接四个点形成一个梯形,
最后使用 close 方法闭合路径。在 paint 方法中,我们使用 Canvas 对象的
 drawPath 方法绘制这个梯形。
*/
class TrapeziumPainter extends CustomPainter {
  @override
  void 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);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

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

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

效果图如下

文章来源:https://blog.csdn.net/u010843503/article/details/134928633
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。