【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.rhkb.cn/news/84546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven安装与配置

目录 一、Maven简介1.1 概述1.2 作用1.3 仓库 二、安装三、配置3.1 配置环境变量3.2 环境变量测试3.3 配置仓库 一、Maven简介 1.1 概述 Maven是一个开源的项目管理工具,用于构建和管理Java项目,基于项目对象模型(POM)的概念。它…

数据库优化脚本执行报错

目录 一、执行数据库优化脚本 报错... 3 解决方法:... 4 1、直接注释掉RECYCLE_POOLS 赋值sql语句块... 4 2、手动修改脚本... 5 附录... 6 一、执行数据库优化脚本 报错 AutoParaAdj3.5_dm8.sql 1)manager中报错 -20001: 执行失败, -7065 数据未…

青大数据结构【2015】

一、单选 二、简答 5.如果一组关键字,以不同的次序输入后建立起来的二叉排序树是否相同?当中序遍历这些二叉排序树时,其遍历的结果是否相同?为什么? 不同,因为输入次序不同,所放置的位置与上一…

Stable Diffusion - 俯视 (from below) 拍摄的人物图像 LoRA 与配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132192139 图像来自 哥特风格 LoRA 俯视 LoRA&#xff0c;提升视觉冲击力&#xff0c;核心配置 <lora:view_from_below:0.6>,(from below,…

时间复杂度与空间复杂度的详解

目录 1.时间复杂度 2.时间复杂度计算例题 3.空间复杂度 1.时间复杂度 算法中的基本操作的执行次数&#xff0c;为算法的时间复杂度。 如何表达 时间复杂度&#xff1f; 大O的渐进表示法 实际中我们计算时间复杂度时&#xff0c;我们其实并不一定要计算精确的执行次数&#xf…

nginx基于源码安装的方式对静态页面、虚拟主机(IP、端口、域名)和日志文件进行配置

一.静态页面 1.更改页面内容 2.更改配置文件 3.测试 二.虚拟主机配置 1.基于IP &#xff08;1&#xff09;在html目录下新建目录存放测试文件 &#xff08;2&#xff09;修改nginx.conf文件&#xff0c;在htttp模块中配置两个server模块分别对应两个IP &#xff08;3&am…

外部节点访问 k8s 集群内的 starrocks

问题描述 用kubeadm在虚拟机搭建了k8s&#xff0c;按starrocks官网步骤&#xff0c;用k8s部署了starrocks 部署成功&#xff1a; 在 k8s集群内节点访问到 sr&#xff1a;&#xff08;通过 clusterIP &#xff09; mysql -h 10.97.182.109 -uroot -P 9030 k8s 节点内访问成功…

创建CREATE_STAT_TABLE 统计信息表在达梦和oracle中的使用

达梦 创建CREATE_STAT_TABLE 统计信息表 PROCEDURE CREATE_STAT_TABLE ( STATOWN VARCHAR(128), STATTAB VARCHAR(128), TABLESPACE VARCHAR(128) DEFAULT NULL, GLOBAL_TEMPORARY BOOLEAN DEFAULT FALSE ); 创建普通表的对应系统表的列名字段包括以下&#xff1a; OWNER TABL…

Linux MQTT智能家居项目(智能家居界面布局)

文章目录 前言一、创建工程项目二、界面布局准备工作三、正式界面布局总结 前言 一、创建工程项目 1.选择工程名称和项目保存路径 2.选择QWidget 3.添加保存图片的资源文件&#xff1a; 在工程目录下添加Icon文件夹保存图片&#xff1a; 将文件放入目录中&#xff1a; …

大数据课程I1——Kafka的概述

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解Kafka的概念&#xff1b; ⚪ 掌握Kafka的配置与启动&#xff1b; 一、简介 1. 基本概念 Apache kafka 是一个分布式数据流平台。可以从如下几个层面来理解&#x…

ngrok内网穿透可以实现资源共享吗?快解析更加简洁

随着互联网的高速发展&#xff0c;越来越多的人开始意识到内网穿透技术的重要性。在这一技术中&#xff0c;ngrok已经成为了一个备受关注的工具。然而&#xff0c;很多人对于ngrok是否可以进行资源共享存在疑问。本文将从新的角度出发&#xff0c;深入探讨这个问题。 了解什么…

TEC2083BS-PD码转换器(解决博世矩阵控制PELCO派尔高球机的问题)

TEC2083BS-PD码转换器 使用说明 1.设备概述 控制码转换器在安防工程中起着非常重要的角色&#xff0c;随着高速球型摄像机在安防工程中大范围的使用&#xff0c;而高速球厂家都因为某些原因很少使用博世、飞利浦的协议。为此&#xff0c;工程商经常会遇到博世协议和PELCO协议之…

【Linux】云服务器自动化部署VuePress博客(Jenkins)

前言 博主此前是将博客部署在 Github Pages&#xff08;基于 Github Action&#xff09;和 Vercel 上的&#xff0c;但是这两种部署方式对于国内用户很不友好&#xff0c;访问速度堪忧。因此将博客迁移到自己的云服务器上&#xff0c;并且基于 Jenkins&#xff08;一款开源持续…

eNSP:双向重定向和路由策略练习

实验要求&#xff1a; 拓扑图&#xff1a; IP、路由器 r1: <Huawei>sys [Huawei]sys r1 [r1]int g 0/0/0 [r1-GigabitEthernet0/0/0]ip add 12.1.1.1 24 [r1-GigabitEthernet0/0/0]int g 0/0/1 [r1-GigabitEthernet0/0/1]ip add 14.1.1.1 24 [r1-GigabitEthernet0/0/1]…

腾讯云轻量服务器和云服务器的CPU处理器有差别吗?

腾讯云轻量应用服务器和CVM云服务器的CPU处理器性能有差别吗&#xff1f;创建轻量应用服务器时不支持指定底层物理服务器的CPU型号&#xff0c;腾讯云将随机分配满足套餐规格的物理CPU型号&#xff0c;通常优先选择较新代次的CPU型号。而云服务器CVM的CPU处理器型号、主频都是有…

flutter开发实战-TextPainter计算文本内容的宽度

flutter开发实战-TextPainter计算文本内容的宽度 最近开发过程中根据Text文本的大小判断是否需要进行显示跑马灯效果&#xff0c;获取文本的大小&#xff0c;需要TextPainter来获取Size 一、TextPainter TextPainter主要用于实现文本的绘制。TextPainter类可以将TextSpan渲染…

docker下载和案例

文章目录 Docker安装一,根据官方文档安装二,根据我以下方式 Docker配置错误导致漏洞一,CRLF注入漏洞介绍在nginx中该漏洞例子解决方法 目录穿越漏洞介绍解决方法 Docker安装 一,根据官方文档安装 官方文档 二,根据我以下方式 docker安装要求&#xff1a; Docker要求Ce…

Java List(列表)

List 是一个有序、可重复的集合&#xff0c;集合中每个元素都有其对应的顺序索引。List 集合允许使用重复元素&#xff0c;可以通过索引来访问指定位置的集合元素。List 集合默认按元素的添加顺序设置元素的索引&#xff0c;第一个添加到 List 集合中的元素的索引为 0&#xff…

pytest接口自动化测试框架搭建的全过程

目录 一. 背景 二. 基础环境 三. 项目结构 四、框架解析 pytest是Python的一种单元测试框架,可用来组织用例执行,用例断言,下面这篇文章主要给大家介绍了关于pytest接口自动化测试框架搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下 一. 背景 Pyte…

HTTP协议

HTTP协议 应用层再谈 "协议"网络版计算器 HTTP协议认识URLurlencode和urldecodeHTTP协议格式HTTP的方法HTTP的状态码HTTP常见Header HTTPS协议HTTPS 是什么什么是"加密"为什么要加密常⻅的加密⽅式 HTTPS 的⼯作过程探究⽅案 1 - 只使⽤对称加密⽅案 2 - 只…