程序员经验分享-hwhale

Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle

2023-10-31

观察走在你前面的人，看看他为何领先，学习他的做法。

drawRect(rect, paint)

rect 矩形
paint 画笔

 

PaintingStyle.fill（用画笔填充绘制）

Rect.fromCircle({ Offset center, double radius }) : this.fromCenter(
    center: center,
    width: radius * 2,
    height: radius * 2,
  );

 

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    double cx=size.width/2,cy=size.height/2;
    double radius=size.width/4;
    Rect rect=Rect.fromCircle(center: Offset(cx,cy),radius: radius);
    canvas.drawRect(rect, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    Rect rect=Rect.fromLTRB(50.0, 50.0, size.width-50.0, size.height-200.0);
    canvas.drawRect(rect, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    Rect rect=Rect.fromPoints(Offset(size.width/2, 0), Offset(0.0, size.height/2));
    canvas.drawRect(rect, paint);

     rect=Rect.fromPoints(Offset(size.width/3, 0), Offset(0.0, size.height/3));
    canvas.drawRect(rect, paint..color=Colors.red);

    rect=Rect.fromPoints(Offset(0, 0), Offset(size.width/4, size.height/4));
    canvas.drawRect(rect, paint..color=Colors.blue);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

const Rect.fromLTWH(double left, double top, double width, double height) : 

this.fromLTRB(left, top, left + width, top + height);
left 左边相对于原点的偏移量
top 顶部相对于原点的偏移量
width 矩形的宽度
height 矩形高度

 

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    Rect rect=Rect.fromLTWH(50.0, 50.0, size.width/2, size.height/2);
    canvas.drawRect(rect, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

  Rect.fromCenter({ Offset center, double width, double height }) : this.fromLTRB(
    center.dx - width / 2,
    center.dy - height / 2,
    center.dx + width / 2,
    center.dy + height / 2,
  );
center 矩形中心坐标点
width 矩形宽度
height 矩形高度 
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    Rect rect=Rect.fromCenter(center: Offset(size.width/2,size.height/2),
width:size.width/2,height:size.height/2);
    canvas.drawRect(rect, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.fill
      ..color=Colors.green
      ..invertColors=false;
    Rect a=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/2);
    Rect b=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/3);
    Rect rect=Rect.lerp(a, b, 0.5);

    canvas.drawRect(a, paint..color=Colors.red);

    canvas.drawRect(rect, paint..color=Colors.grey);

    canvas.drawRect(b, paint..color=Colors.green);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

源码：

 static Rect lerp(Rect a, Rect b, double t) {
    assert(t != null);
    if (a == null && b == null)
      return null;
    if (a == null)
      return Rect.fromLTRB(b.left * t, b.top * t, b.right * t, b.bottom * t);
    if (b == null) {
      final double k = 1.0 - t;
      return Rect.fromLTRB(a.left * k, a.top * k, a.right * k, a.bottom * k);
    }
    return Rect.fromLTRB(
      lerpDouble(a.left, b.left, t),
      lerpDouble(a.top, b.top, t),
      lerpDouble(a.right, b.right, t),
      lerpDouble(a.bottom, b.bottom, t),
    );
  }
double lerpDouble(num a, num b, double t) {
  if (a == null && b == null)
    return null;
  a ??= 0.0;
  b ??= 0.0;
  return a + (b - a) * t;
}

PaintingStyle.fill（用画笔绘制边框）

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.stroke
      ..color=Colors.green
      ..invertColors=false;
    Rect a=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/2);
    Rect b=Rect.fromCircle(center: Offset(size.width/2,size.height/2),radius: size.width/3);
    Rect rect=Rect.lerp(a, b, 0.5);

    canvas.drawRect(a, paint..color=Colors.red);

    canvas.drawRect(rect, paint..color=Colors.grey);

    canvas.drawRect(b, paint..color=Colors.green);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.stroke
      ..color=Colors.green
      ..invertColors=false;
    double cx=size.width/2,cy=size.height/2;
    double radius=size.width/4;
    Rect rect=Rect.fromCircle(center: Offset(cx,cy),radius: radius);
    canvas.drawRect(rect, paint);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth=1.0
      ..style=PaintingStyle.stroke
      ..color=Colors.green
      ..invertColors=false;
    Rect rect=Rect.fromPoints(Offset(size.width/2, 0), Offset(0.0, size.height/2));
    canvas.drawRect(rect, paint);

    rect=Rect.fromPoints(Offset(size.width/3, 0), Offset(0.0, size.height/3));
    canvas.drawRect(rect, paint..color=Colors.red);

    rect=Rect.fromPoints(Offset(0, 0), Offset(size.width/4, size.height/4));
    canvas.drawRect(rect, paint..color=Colors.blue);
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 俄罗斯方块的一面

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    double w = size.width / 3;
    double h = size.height / 3;
    for (int i = 0; i < 3; i++) {
      for (int j = 0; j < 3; j++) {
        Rect rect = Rect.fromPoints(
            Offset(w * j, h * i), Offset(w * (j + 1), h * (i + 1)));
        switch (i) {
          case 0:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.blue : Colors.deepOrange));
            break;
          case 1:
            canvas.drawRect(rect, paint..color = (i % 3 == 1 &&j%3==0? Colors.red : Colors.green));
            break;
          case 2:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 && j%2==0? Colors.amber : Colors.deepPurpleAccent));
            break;
        }
      }
    }
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    double w = size.width / 3;
    double h = size.height / 3;
    for (int i = 0; i < 3; i++) {
      for (int j = 0; j < 3; j++) {
        Rect rect = Rect.fromPoints(
            Offset(w * j, h * i), Offset(w * (j + 1), h * (i + 1)));
        switch (i) {
          case 0:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.blue : Colors.deepOrange));
            break;
          case 1:
            canvas.drawRect(rect, paint..color = (i % 3 == 1 &&j%3==1? Colors.red : Colors.green));
            break;
          case 2:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.amber : Colors.deepPurpleAccent));
            break;
        }
      }
    }
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

五彩网格

 

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke
      ..color = Colors.green
      ..invertColors = false;

    double w = size.width / 9;
    double h = size.height / 9;
    for (int i = 0; i < 9; i++) {
      for (int j = 0; j < 9; j++) {
        Rect rect = Rect.fromPoints(
            Offset(w * j, h * i), Offset(w * (j + 1), h * (i + 1)));
        switch (i) {
          case 0:
          case 8:
          case 6:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.blue : Colors.deepOrange));
            break;
          case 1:
          case 3:
          case 5:
            canvas.drawRect(rect, paint..color = (i % 3 == 1 &&j%3==1? Colors.red : Colors.green));
            break;
          case 2:
          case 7:
          case 4:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.amber : Colors.deepPurpleAccent));
            break;
        }
      }
    }
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}


class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = Colors.green
      ..invertColors = false;

    double w = size.width / 9;
    double h = size.height / 9;
    for (int i = 0; i < 9; i++) {
      for (int j = 0; j < 9; j++) {
        Rect rect = Rect.fromPoints(
            Offset(w * j, h * i), Offset(w * (j + 1), h * (i + 1)));
        switch (i) {
          case 0:
          case 8:
          case 6:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.blue : Colors.deepOrange));
            break;
          case 1:
          case 3:
          case 5:
            canvas.drawRect(rect, paint..color = (i % 3 == 1 &&j%3==1? Colors.red : Colors.green));
            break;
          case 2:
          case 7:
          case 4:
            canvas.drawRect(rect, paint..color = (i % 2 == 0 &&j%2==0? Colors.amber : Colors.deepPurpleAccent));
            break;
        }
      }
    }
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 杂文

Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle 的相关文章

随机推荐

  • 排序算法-----计数排序

    目录 前言 计数排序 1 算法描述 2 基本思想 3 实现逻辑 4 示例剖析 5 动图演示 代码实现 1 C C 代码 2 Python代码 算法分析 时间复杂度 空间复杂度 稳定性 局限性 前言 有没有一种排序时间复杂度为直线正比的排序算

  • hyper-v虚拟机的创建时间总是是1601的问题。

    解决办法 1 在虚拟机正在运行时 点击停止服务 虚拟机不会关闭 2 同意强制关闭后 在重新启动服务即可 3 虚拟机的创建时间将正确显示

  • 2015中国各地区最佳大学排行榜 报考首选前五强

    艾瑞深中国校友会网最新发布2015中国各地区最佳大学排行榜 2015中国各地区最佳独立学院排行榜和2015中国各地区最佳民办大学排行榜等榜单 旨在让两岸四地高考考生及家长了解中国各地区高校的办学水平和办学实力 2015中国各地区最佳大学排行

  • 数据库常见知识点

    数据库 Mysql的金额用什么数据类型表示 在mysql中 金额用 DECIMAL 类型 DECIMAL类型是专门为财务相关问题而设计的数据类型 能够解决数据的范围和精度的问题 常用于货币数据 如价格 工资 帐户余额等 它实际上是以字符串的

  • 经典分类算法——感知机算法

    文章目录 经典分类算法 感知机算法 1 感知机算法思想 错误修正 2 感知机算法 原始形式 形式化表示 3 感知机算法 对偶形式 形式化表示 4 感知机算法 随机梯度下降 SGD 5 感知机算法 一种变形 6 感知器算法 示例 7 感知器算

  • 代码审计及工具

    代码审计 是对应用程序源代码进行系统性检查的工作 它的目的是为了找到并且修复应用程序在开发阶段存在的一些漏洞或者程序逻辑错误 避免程序漏洞被非法利用给企业带来不必要的风险 代码审计不是简单的检查代码 审计代码的原因是确保代码能安全的做到对信

  • python之多线程并发

    前言 今天呢笔者想和大家来聊聊python多线程的并发 废话就不多说了咱们直接进入主题哟 一 线程执行 python的内置模块提供了两个内置模块 thread和threading thread是源生模块 threading是扩展模块 在th

  • boost::python::converter::as_to_python_function相关的测试程序

    boost python converter as to python function相关的测试程序 boost python是一个用于将C 代码集成到Python中的强大工具库 其中的converter模块提供了将C 对象转换为Pyth

  • java-IDEA常用插件

    1 JRebel 热部署插件 1 IDEA 中搜索并安装插件 JRebel 重启 2 获取UUID https www guidgen com 3 按下图填写信息 https jrebel qekang com UUID 把UUID替换成上

  • 基于深度学习的商品推荐系统（Web）

    基于深度学习的商品推荐系统 ECRS Web 项目简介 技术栈 项目用到的技术如下 语言 Python3 Java Web端 Layui Flask Nginx Gevent Flask Cache 模型训练 PaddleRec Paddl

  • js反爬中如何如何处理无限debugger

    有时候在爬取网站时 遇到无限debugger的情况 一种是constructor中的debugger 还有一种是eval中的debugger 可以通过hook的方式绕过无限debugger 处理eval中无限debugger var eva

  • 26. selenium：浏览器自动测试模块——一款方便且能装X的爬虫工具（附多个实例）

    目录 前言 什么是selenium 配置selenium 安装selenium库 安装浏览器驱动 以Chrome为例 使用selenium库 例1 实现打开网页拿取网页标题 运行效果 例2 实现抓取某招聘网站Python岗位的职位信息 运行

  • setImageResource和setImageDrawable区别

    ImageView设置图片的方式有很多钟 可以在xml里面写android src drawable xxx 也可以在java代码里面设置 在java里面的设置方式也有多种 方法包括 setImageResource setImageDra

  • Xilinx ISE系列教程（3）：关联第三方编辑器Notepad++/VS Code/UltraEdit/Sublime Text/Emacs/Vim

    文章目录 toc 1 ISE关联Notepad 编辑器 2 ISE关联VS Code编辑器 3 ISE关联UltraEdit编辑器 4 ISE关联Sublime Text3编辑器 5 ISE关联Emacs编辑器 6 ISE关联Vim编辑器

  • VMware中Centos Linux 8虚拟机安装过程

    VMware Workstation的安装过程已经有博文分享 本文是VMware安装成功后虚拟机安装的过程 在安装前需要下载CentOS镜像文件 阿里云地址为 https mirrors aliyun com centos 我下载的是8 即

  • 下载百度网盘资源不限速的两种方法

    下载百度网盘资源不限速的两种方法 方法1 适合文件大小4g以下的下载 由于直接用proxpee down下载资源文件时出现 error code 31090 error msg package is too large request id

  • 神仙文献管理软件Mendeley 保姆级教程

    神仙文献管理软件Mendeley 保姆级教程 英国文文的文章 知乎 https zhuanlan zhihu com p 65992720 Mendeley是一款Elsevier公司旗下的免费文献管理软件 集文献的搜集 管理 搜索 阅读 标

  • 云计算与大数据-虚拟化与容器技术题库

    第2章 虚拟化与容器技术习题 2 1 选择题 1 典型的虚拟化架构不包括 D A 宿主机操作系统 B 虚拟机 C 虚拟化层 D 虚拟内存 2 虚拟化技术的研究目的包括 D A 降低管理成本 B 增强可移植性 C 提高软件开发效率 D 以上都

  • 用java PreparedStatement就不用担心sql注入了吗？

    http www cnblogs com iyangyuan archive 2015 09 15 4809494 html 用java PreparedStatement就不用担心sql注入了吗 言归正传 对java有了解的同学基本上都体

  • Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle

    观察走在你前面的人 看看他为何领先 学习他的做法 drawRect rect paint rect 矩形 paint 画笔 PaintingStyle fill 用画笔填充绘制 Rect fromCircle Offset center d

热门标签