【Flutter】【基础】CustomPaint 绘画功能,绘制各种图形(二)

CustomPaint

使用实例和代码:

1.canvas.drawColor 绘制背景颜色

dart 复制代码
class MyPainter1 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    //绘制背景颜色,整个UI 现在就是红色的
    canvas.drawColor(Colors.red, BlendMode.srcATop);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

2.canvas.drawCircle 绘制圆

dart 复制代码
    final whitePaint = Paint()..color = Colors.red;
    //offset 位置,半径
    canvas.drawCircle(const Offset(100, 100), 100, whitePaint);

3.canvas.drawRect绘四边形

dart 复制代码
    //绘制四边形
    final redPaint = Paint()..color = Colors.red;
    // left:距离左边的距离, top:距离右边的距离, width, height
    canvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), redPaint);
    //center 中心点的位置, 宽高,
    canvas.drawRect(
        Rect.fromCenter(center: Offset(50, 50), width: 100, height: 100),
        redPaint);
    //radius 半径
    canvas.drawRect(
        Rect.fromCircle(center: const Offset(50, 50), radius: 50), redPaint);

    canvas.drawRect(
        Rect.fromPoints(const Offset(50, 50), Offset(100, 100)), redPaint);

4.canvas.drawRRect 绘制圆角矩形

其他的方法可以自行尝试,参数大同小异

dart 复制代码
// left, top, right, bottom, radius
    canvas.drawRRect(
        RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(20)), redPaint);
//可以设定不同边角弧度的
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(100, 100, 200, 200,
            topLeft: const Radius.circular(20)),
        redPaint);

5.canvas.drawRRect 嵌套绘制

dart 复制代码
canvas.drawDRRect(
    RRect.fromLTRBR(100, 100, 300, 300, const Radius.circular(20)),
    RRect.fromLTRBR(150, 150, 200, 200, const Radius.circular(20)),
    redPaint);

6.canvas.drawOval 绘制椭圆形

dart 复制代码
//椭圆形
    canvas.drawOval(Rect.fromLTRB(100, 80, 400, 300), redPaint);

7.canvas.drawPath 绘制路径

dart 复制代码
    final redPaint = Paint()
      ..color = Colors.red
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;

    // final path = Path()
    //   ..moveTo(100, 100) //起始点
    //   ..lineTo(200, 200) //链接到点
    //   ..lineTo(400, 400) //链接到点
    //   ..close(); //关闭
    // canvas.drawPath(path, redPaint);

    final path1 = Path()
      ..moveTo(400, 400) //起始点
      ..lineTo(400, 500) //链接到点
      ..lineTo(400, 400) //链接到点
      ..addRect(Rect.fromLTRB(500, 500, 100, 100)) //新增一个矩形,或者其他的也可以
      ..close(); //关闭
      //或者在这边添加也可以
    // path1.addRect(Rect.fromLTRB(500, 500, 100, 100));
    // path1.close();
    canvas.drawPath(path1, redPaint);
相关推荐
纪元A梦12 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生14 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了15 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
louisgeek17 分钟前
Android NSD 网络服务发现
android
海底火旺41 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺42 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码42 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
张可1 小时前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron
余辉zmh1 小时前
【Linux系统篇】:信号的生命周期---从触发到保存与捕捉的底层逻辑
android·java·linux