当前位置: 首页 > news >正文

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

在这里插入图片描述

CustomPaint

使用实例和代码:

1.canvas.drawColor 绘制背景颜色

class MyPainter1 extends CustomPainter {void paint(Canvas canvas, Size size) {//绘制背景颜色,整个UI 现在就是红色的canvas.drawColor(Colors.red, BlendMode.srcATop);}bool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}

纯色的背景

2.canvas.drawCircle 绘制圆

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

在这里插入图片描述

3.canvas.drawRect绘四边形

    //绘制四边形final redPaint = Paint()..color = Colors.red;// left:距离左边的距离, top:距离右边的距离, width, heightcanvas.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 绘制圆角矩形

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

// left, top, right, bottom, radiuscanvas.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 嵌套绘制

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 绘制椭圆形

//椭圆形canvas.drawOval(Rect.fromLTRB(100, 80, 400, 300), redPaint);

在这里插入图片描述

7.canvas.drawPath 绘制路径

    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);

在这里插入图片描述

http://www.lryc.cn/news/118126.html

相关文章:

  • YOLOv5修改注意力机制CBAM
  • 计算机网络 网络层 概述
  • 算法练习--动态规划 相关
  • JAVA volatile 关键字
  • [Leetcode] [Tutorial] 回溯
  • STM32 CubeMX USB_MSC(存储设备U盘)
  • 湘大 XTU OJ 1214 A+B IV 题解:数位移动的本质+布尔变量标记+朴素模拟
  • 以商业大数据技术助力数据合规流通体系建立,合合信息参编《数据经纪从业人员评价规范》团标
  • 【论文阅读】Deep Instance Segmentation With Automotive Radar Detection Points
  • 易服客工作室:如何创建有用的内容日历
  • Excel革命,基于电子表格开发的新工具,不是Access和Power Fx
  • “崩溃”漏洞会影响英特尔 CPU 的使用寿命,可能会泄露加密密钥等
  • 17.电话号码的字母组合(回溯)
  • Redis小例子
  • ETLCloud+MaxCompute实现云数据仓库的高效实时同步
  • HTTP代理授权方式介绍
  • 《合成孔径雷达成像算法与实现》Figure3.4
  • qt5.15.2 使用mysql8.1
  • 广州华锐互动:VR3D课程在线教育平台为职业院校提供沉浸式的虚拟现实学习体验
  • clion run qt 问题汇总
  • 深入理解spring面经
  • 2023年,App运行小游戏,可以玩出什么创意?
  • 景嘉微电子2021笔试题
  • selenium官网文档阅读总结(day 4)
  • 15.4 【Linux】可唤醒停机期间的工作任务
  • [FPGA开发]解决正点原子Xilinx下载器无法下载、灯不亮的问题
  • DP(区间DP)
  • MySQL5.7保姆级安装教程
  • Linux:getopts解析命令行选项和参数
  • c语言——三子棋