当前位置:网站首页>使用 CustomPaint 绘制基本图形
使用 CustomPaint 绘制基本图形
2022-07-07 21:34:00 【岛上码农@公众号同名】
上一篇初识 Flutter 的绘图组件 — CustomPaint我们介绍了 CustomPaint
的基本概念和使用,可以看到 CustomPaint
其实和 前端的 Canvas
基本上是一样的,实际上前端 Canvas
支持的绘制方法 CustomPaint
都支持,毕竟 CustomPaint
其实也是基于 Canvas
实现的。本篇我们来介绍 CustomPaint
基本图形的绘制。
绘制矩形
绘制矩形比较简单,方法定义如下:
void drawRect(Rect rect, Paint paint)
其中 rect
为要绘制矩形,paint
即画笔配置对象。比如我们要水平居中绘制一个宽度200 x 120的矩形,可以使用如下代码:
canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
var center = size / 2;
// 绘制矩形
var paint = Paint()..color = Color(0xFF2080E5);
paint.strokeWidth = 2.0;
canvas.drawRect(
Rect.fromLTWH(center.width - 100, 60, 200, 120),
paint,
);
paint
默认是实心填充的,如果要空闲填充,设置paint
对象的style
属性 为 PaintingStyle.stroke
即可。
绘制圆形
绘制圆形上一篇有介绍过,和绘制矩形类似,只是传入的参数是圆心位置,半径和 paint
对象。
canvas.drawCircle(
Offset(center.width - 80, 240),
40,
paint,
);
绘制椭圆
椭圆的尺寸是通过外接的矩形约束的,调用形式和绘制矩形相同。
canvas.drawOval(
Rect.fromLTWH(center.width, 200, 120, 80),
paint,
);
绘制任意形状
绘制任意形状通过 drawPath
实现,将所需要绘制的形状路径 使用 Path
对象构建即可。以画一个等边三角形为例,我们确定三个顶点的位置后,使用 Path
对象的 lineTo
方法将三个顶点连接起来即可。下面是实现代码:
// 使用 Path绘制三角形
Path trianglePath = Path();
// 空心绘制
paint.style = PaintingStyle.stroke;
trianglePath.moveTo(center.width - 30, 300);
trianglePath.lineTo(center.width + 30, 300);
trianglePath.lineTo(center.width, 352);
trianglePath.lineTo(center.width - 30, 300);
canvas.drawPath(trianglePath, paint);
绘制弧形
绘制弧形实际也是通过绘制椭圆实现的,只是通过控制绘制的角度来控制弧形绘制的范围。绘制弧形的方法定义如下:
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
其中 rect
就是椭圆尺寸的约束矩形,startAngle
是起始角度,sweepAngle
是绘制的角度范围。useCenter
表示是否到矩形中心点闭合,默认为 true
。即按顺时针方向。默认是从中心点到对应起始角度的点连直线绘制完指定角度范围后再连直线回到中心点。如果 useCenter
为 false
,那么就直接按弧线的起止点闭合,而不会回到中心点。下面是两种绘制的区别,左边是 useCenter
为 false
,右边是 useCenter
为 true
,其他参数都相同。 下面的代码是绘制弧形的示例代码:
canvas.drawArc(
Rect.fromLTWH(center.width - 60, 340, 120, 80),
0,
pi / 2,
false,
paint,
);
总结
本篇介绍了 CustomPaint 绘制基本图形的方法和示例,实际上 Flutter 的 Canvas 提供了很多其他绘制图形的方法,如绘制线条,绘制圆角矩形,绘制文本等等,有兴趣的可以参考官网的说明文档查看各个方法的使用。有了绘制基本图形的基础,我们就可以绘制一些有趣的图形了 —— UI 小姐姐交代的任务还没完成呢!
边栏推荐
- Song list 11111
- POJ 3140 Contestants Division「建议收藏」
- UVA 12230 – crossing rivers (probability) "suggested collection"
- How does win11 unblock the keyboard? Method of unlocking keyboard in win11
- Goal: do not exclude yaml syntax. Try to get started quickly
- Display optimization when the resolution of easycvr configuration center video recording plan page is adjusted
- HOJ 2245 浮游三角胞(数学啊 )
- Have you ever been confused? Once a test / development programmer, ignorant gadget C bird upgrade
- 2022 how to evaluate and select low code development platforms?
- Ternary expressions, generative expressions, anonymous functions
猜你喜欢
Have you ever been confused? Once a test / development programmer, ignorant gadget C bird upgrade
[开源] .Net ORM 访问 Firebird 数据库
Jerry's test box configuration channel [chapter]
The new version of onespin 360 DV has been released, refreshing the experience of FPGA formal verification function
Focusing on safety in 1995, Volvo will focus on safety in the field of intelligent driving and electrification in the future
NVR硬盘录像机通过国标GB28181协议接入EasyCVR,设备通道信息不显示是什么原因?
Automatic classification of defective photovoltaic module cells in electronic images
[C language] advanced pointer --- do you really understand pointer?
谈谈制造企业如何制定敏捷的数字化转型策略
解决uni-app中uni.request发送POST请求没有反应。
随机推荐
Where is the big data open source project, one-stop fully automated full life cycle operation and maintenance steward Chengying (background)?
Feature generation
NVR硬盤錄像機通過國標GB28181協議接入EasyCVR,設備通道信息不顯示是什麼原因?
双塔模型的最强出装,谷歌又开始玩起“老古董”了?
Open source OA development platform: contract management user manual
The maximum number of meetings you can attend [greedy + priority queue]
Talk about relational database and serverless
The little money made by the program ape is a P!
Reptile combat (VII): pictures of the king of reptiles' heroes
【JDBC Part 1】概述、获取连接、CRUD
Jerry's manual matching method [chapter]
cv2.resize函数报错:error: (-215:Assertion failed) func != 0 in function ‘cv::hal::resize‘
Addition, deletion, modification and query of sqlhelper
An overview of the latest research progress of "efficient deep segmentation of labels" at Shanghai Jiaotong University, which comprehensively expounds the deep segmentation methods of unsupervised, ro
[JDBC Part 1] overview, get connection, CRUD
Embedded development: how to choose the right RTOS for the project?
强化学习-学习笔记9 | Multi-Step-TD-Target
Validutil, "Rethinking the setting of semi supervised learning on graphs"
Build your own website (18)
Ad domain group policy management