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

【Flutter】【基础】CustomPaint 绘画功能(一)

在这里插入图片描述

功能:CustomPaint

  • 相当于在一个画布上面画画,可以自己绘制不同的颜色形状等
  • 在各种widget 或者是插件不能满足到需求的时候,可以自己定义一些形状

使用实例和代码:

CustomPaint: 能使你绘制的东西显示在你的ui 上面,
painter=》child=》oregroundPainter,foregroundPainter最外面的一层会覆盖painter,child 层里面的widget.

 return Container(//painter 绘制完成之后需要再CustomPaint 里面构建称为widgetchild: Center(child: CustomPaint(child: Icon(Icons.abc,size: 40,color: Colors.red,),painter: MybackGroudnPaiter(), //最内一层//  child: ,//子组件,在中间foregroundPainter: ForegroundPainter(), //最外面一层,也是  CustomPainter),),);

CustomPainter 绘制

class MybackGroudnPaiter extends CustomPainter {void paint(Canvas canvas, Size size) {//canvas 画布,size 画布的尺寸//在这边绘制// canvas.drawColor(Colors.red, BlendMode.color);var centerp = size / 2;//定义画笔是什么颜色,样式,画笔的宽度var paint = Paint()..color = Colors.teal..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 100, centerp.height - 100, 200, 200),paint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}class ForegroundPainter extends CustomPainter {void paint(Canvas canvas, Size size) {var centerp = size / 2;//定义画笔是什么颜色,样式,画笔的宽度var paint = Paint()..color = Colors.pink..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 130, centerp.height - 130, 200, 200),paint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}

绘制完成之后显示的图片


绘画的能力

我们绘制1000个彩色点点,从上往下掉落,看看性能,没有任何的卡顿,真给力

import 'dart:math';
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);Widget build(BuildContext context) {return const MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: MyHomePage(title: 'jack ma',),),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);final String title;State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage>with SingleTickerProviderStateMixin {late AnimationController _controller;final List<Snowflake> _snowflakes =List.generate(1000, (index) => Snowflake());void initState() {;_controller =AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat();super.initState();}Widget build(BuildContext context) {return Scaffold(body: Center(child: SizedBox(width: double.infinity,height: double.infinity,child: AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget? child) {//一直在这边build,5s 动画运行时间for (var snow in _snowflakes) {snow.fall();}return CustomPaint(painter: MyPainter(_snowflakes),);},),),));}
}class MyPainter extends CustomPainter {final List<Snowflake> _snowflakes;MyPainter(this._snowflakes);void paint(Canvas canvas, Size size) {final whitePaint = Paint()..color = Colors.grey;for (int i = 0; i < 1000; i++) {whitePaint.color = Colors.primaries[i % Colors.primaries.length];canvas.drawCircle(Offset(_snowflakes[i].x, _snowflakes[i].y),_snowflakes[i].radius, whitePaint);}}bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}class Snowflake {double x = Random().nextDouble() * 400;double y = Random().nextDouble() * 800;double radius = Random().nextDouble() * 2 + 2;double velocity = Random().nextDouble() * 4 + 2;void fall() {y += velocity;if (y > 800) {y = 0;x = Random().nextDouble() * 400;radius = Random().nextDouble() * 2 + 2;velocity = Random().nextDouble() * 4 + 2;}}
}

在这里插入图片描述

相关文章:

【Flutter】【基础】CustomPaint 绘画功能(一)

功能&#xff1a;CustomPaint 相当于在一个画布上面画画&#xff0c;可以自己绘制不同的颜色形状等 在各种widget 或者是插件不能满足到需求的时候&#xff0c;可以自己定义一些形状 使用实例和代码&#xff1a; CustomPaint&#xff1a; 能使你绘制的东西显示在你的ui 上面&a…...

iOS 实现图片高斯模糊效果

效果图 用到了 UIVisualEffectView 实现代码 - (UIVisualEffectView *)bgEffectView{if(!_bgEffectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_bgEffectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _bgEffect…...

[保研/考研机试] KY7 质因数的个数 清华大学复试上机题 C++实现

描述 求正整数N(N>1)的质因数的个数。 相同的质因数需要重复计算。如1202*2*2*3*5&#xff0c;共有5个质因数。 输入描述&#xff1a; 可能有多组测试数据&#xff0c;每组测试数据的输入是一个正整数N&#xff0c;(1<N<10^9)。 输出描述&#xff1a; 对于每组数…...

初识Redis

目录 认识Redis分布式系统Redis的特性Redis的应用场景Redis客户端Redis命令 认识Redis 上面一段话是官网给出的对Redis的介绍&#xff0c;in-memory data store表明Redis是在内存中存储数据的&#xff0c;这和我们接触的其他数据库就有很大的不同&#xff0c;比如MySQL&#xf…...

每天一道leetcode:115. 不同的子序列(动态规划困难)

今日份题目&#xff1a; 给你两个字符串 s 和 t &#xff0c;统计并返回在 s 的 子序列 中 t 出现的个数。 题目数据保证答案符合 32 位带符号整数范围。 示例1 输入&#xff1a;s "rabbbit", t "rabbit" 输出&#xff1a;3 解释&#xff1a; 如下所…...

服务器数据恢复-RAID5多块磁盘离线导致崩溃的数据恢复案例

服务器数据恢复环境&#xff1a; DELL POWEREDGE某型号服务器中有一组由6块SCSI硬盘组建的RAID5阵列&#xff0c;LINUX REDHAT操作系统&#xff0c;EXT3文件系统&#xff0c;存放图片文件。 服务器故障&分析&#xff1a; 服务器raid5阵列中有一块硬盘离线&#xff0c;管理员…...

NO.2 MyBatis框架:创建Mapper接口和映射文件,实现基本增删改查

目录 1、Mapper接口和映射文件关系 2、Mapper接口和映射文件的命名规则 2.1 Mapper接口的命名规则 2.2 映射文件的命名规则 3、Mapper接口和映射文件的创建及增删改查的实现 3.1 Mapper接口和映射文件的创建 3.2 增删改查的实现 3.2.1表结构 3.2.2 创建表User对应的实…...

【JS】怎么提取object类的内容

需求&#xff1a;在网页端中通过getElementsByClassName获取到一个元素&#xff0c;想提取其中的数字内容做个if判断&#xff0c;奈何一直提取不了 开始获取元素时&#xff0c;以为默认就是字符类型&#xff1b;但使用操作字符的函数就失败&#xff0c;然后就考虑数据类型是不是…...

分布式系统的 38 个知识点

天天说分布式分布式&#xff0c;那么我们是否知道什么是分布式&#xff0c;分布式会遇到什么问题&#xff0c;有哪些理论支撑&#xff0c;有哪些经典的应对方案&#xff0c;业界是如何设计并保证分布式系统的高可用呢&#xff1f; 1. 架构设计 这一节将从一些经典的开源系统架…...

机器学习基础(二)

线性回归 误差是独立并且具有相同的分布通常认为服从均值为0方差为的高斯分布。 损失函数(loss Function)/代价函数(Cost Function) 其实两种叫法都可以,损失函数(loss function)或代价函数(cost function)是将随机事件或其有关随机变量的取值映射为非负实数以表示该随…...

Java 实现Rtsp 转rtmp,hls,flv

服务支撑&#xff1a;FFmpeg srs(流媒体服务器) 整个流程是 FFmpeg 收流转码 推 rtmp 到流媒体服务 流媒体服务再 分发流到公网 搭建流媒体服务: 1. SRS (Simple Realtime Server) | SRS &#xff08;本例子使用的是SrS 安装使用docker &#xff09; 2.GitHub - ZLMedi…...

机器学习基础(三)

逻辑回归 场景 垃圾邮件分类 预测肿瘤是良性还是恶性 预测某人的信用是否良好 正确率与召回率 正确率与召回率(Precision & Recall)是广泛应用于信息检索和统计学分类领域的两个度量值,用来评价结果的质量。 一般来说,正确率就是检索出来的条目有多少是正确的,召回率就…...

Kubeadm安装K8s集群

一、硬件环境 准备3台Linux服务器&#xff0c;此处用Vmware虚拟机。 主机名CPU内存k8smaster2核4Gk8snode12核4Gk8snode22核4G 二、系统前置准备 配置三台主机的hosts文件 cat << EOF > /etc/hosts 192.168.240.130 k8smaster 192.168.240.132 k8snode1 192.168.…...

【C++】开源:spdlog跨平台日志库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍spdlog日志库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…...

[Azkaban] No active executors found

没有找到活动的executors&#xff0c;需在MySQL数据库里设置端口为12321的executors表的active为1&#xff1a; select * from executors;如果显示active0 则需要进行处理&#xff1a; update azkaban.executors set active1;当active0&#xff0c;更新为1时&#xff0c;用 n…...

无涯教程-Perl - recv函数

描述 This function receives a message on SOCKET attempting to read LENGTH bytes, placing the data read into variable SCALAR.The FLAGS argument takes the same values as the recvfrom( ) system function, on which the function is based. When communicating wit…...

算法练习-搜索 相关

文章目录 迷宫问题 迷宫问题 定义一个二维数组 m行 * n列 &#xff0c;如 4 5 数组下所示&#xff1a; int arr[5][5] { 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, }; 它表示一个迷宫&#xff0c;1表示墙壁&#xff0c;0表示可以走的路&#xff0c;只…...

PyQt5控件布局管理

Qt Designer提供了四种窗口布局&#xff1a;Vertical Layout(垂直布局) &#xff0c;Horizontal Layout(水平布局)&#xff0c;Grid Layout(栅格布局)&#xff0c;Form Layout(表单布局)&#xff0c;以及一种隐藏的布局—绝对布局 一般进行布局有两种方式&#xff1a; 一是通…...

TypeScript 一分钟让你理解泛型是什么

TypeScript 一分钟让你理解 泛型是什么 TS的泛型是指在定义函数、接口或类型时&#xff0c;不预先指定具体的类型&#xff0c;而是在使用时指定类型限制的一种特性。 泛型和函数中的参数比较类似&#xff0c;我们定义一个函数的时候有时会给它留一个参数名&#xff0c;在使用这…...

PatchMatchNet 训练dtu数据集、训练曲线查看、实操教程图图文详解、

文章目录 1 查看要求 下载数据集2 训练2.1 路径配置2.2 训练2.3 模型输出 与 训练曲线查看2.4 输出训练 log文件1 查看要求 下载数据集 在代码文件加下打开 README.md文件找到训练说明,查看那要求、下载训练集、训练方法 ## Training Download pre-processed [DTUs trainin…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...