Flutter 36: 图解自定义 View 之 Canvas (三)
小菜继续学习 Canvas 的相关方法:
drawVertices 绘制顶点
小菜上次没有整理 drawVertices 的绘制方法,这次补上;Vertice 即顶点,通过绘制多个顶点,在进行连线,多用于 3D 模型中;
drawVertices 包括三个参数,第一个是顶点属性,根据不同属性线的连接方式也不同;第二个是混合模式,即线的颜色与背景色混合效果;第三个是画笔,小菜测试调整 Paint 线的粗细无法调整整体连线的粗细;
小菜借用 A B C D E F G H I 顶点来简单介绍:
- VertexMode.triangles:每三个分割顶点相连,即 [A B C] [D E F] [G H I] 共 3 组;
- VertexMode.triangleStrip:每相邻的三个顶点相连,即 [A B C] [B C D] [C D E] [D E F] [E F G] [F G H] [G H I] 共 7 组;
- VertexMode.triangleFan:每相邻的两个顶点与首点相连,即 [A B C] [A C D] [A D E] [A E F] [A F G] [A G H] [A H I] 共 7 组;
canvas.drawVertices(Vertices(VertexMode.triangles, [Offset(30, 30), Offset(30, 60),Offset(60, 60),Offset(90, 60), Offset(120, 60), Offset(120, 30),Offset(60, 90), Offset(60, 120), Offset(90, 120),]),BlendMode.colorBurn, Paint()..color = Colors.red);canvas.drawVertices(Vertices(VertexMode.triangleStrip, [Offset(210, 30), Offset(210, 60), Offset(240, 60),Offset(270, 60), Offset(300, 60), Offset(300, 30),Offset(240, 90), Offset(240, 120), Offset(270, 120),]),BlendMode.colorBurn, Paint()..color = Colors.green);canvas.drawVertices(Vertices(VertexMode.triangleFan, [Offset(120, 150), Offset(120, 180), Offset(150, 180),Offset(180, 180), Offset(210, 180), Offset(210, 150),Offset(150, 210), Offset(150, 240), Offset(180, 240),]),BlendMode.colorBurn, Paint()..color = Colors.blue);
画布操作
小菜接下来介绍一下画布的基本操作,与 Android 很相似;
scale 缩放
scale 即缩放效果,缩放的是画布大小,可以设置缩放倍数,且缩放倍数会叠加;
canvas.drawRect(Rect.fromLTWH(60, 60, 90, 50),Paint()..color = Colors.red..strokeWidth = 2.0..style = PaintingStyle.stroke); // 缩放 canvas.scale(2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 缩放 canvas.scale(0.25); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke);
translate 平移
translate 即平移,平移的也是画布,并非画布中子元素,两个参数分别为水平方向和竖直方向距离;
canvas.drawLine(Offset(0, 0), Offset(60, 60),Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 平移 canvas.translate(30, 90); canvas.drawLine( Offset(0, 0), Offset(0, Screen.height), Paint()..color = Colors.blueGrey..strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(Screen.width, 0), Paint()..color = Colors.blueGrey..strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0.style = PaintingStyle.stroke);
rotate 旋转
rotate 即旋转,原点为屏幕左上角,小菜为了效果先将画布平移一部分到屏幕中间在进行旋转测试,注意参数并非角度而是对应的 PI 值;
canvas.drawLine(Offset(0, 0), Offset(60, 60),Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 以当前原点旋转 90 度 canvas.rotate(degToRad(90)); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint()..color = Colors.green..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.green ..strokeWidth = 2.0..style = PaintingStyle.stroke);
skew 斜切
skew 即斜切,两个参数为水平方向和竖直方向切度值,值为三角函数中的 tan 值,即 45 度时 tan 值为 1;
canvas.drawRect(Rect.fromLTWH(60, 0, 90, 50),Paint()..color = Colors.red..strokeWidth = 2.0..style = PaintingStyle.stroke); // 水平方向斜近 30 度,竖直方向不变 canvas.skew(0.6, 0); canvas.drawRect( Rect.fromLTWH(60, 0, 90, 50), Paint()..color = Colors.green ..strokeWidth = 2.0..style = PaintingStyle.stroke);
save/restore 保存/恢复
save/savelayer 即保存当前画布,restore 即恢复当前画布,也可以理解为清空重新绘制;save/restore 可以多次,以栈的方式存储,可以通过进栈/出栈到当具体某一层;但是小菜测试时发现与 save/restore 需要成对出现,否则回报不匹配异常;
canvas.clipRect(Rect.fromLTWH(40, 40, Screen.width - 80, Screen.width - 80));
canvas.drawColor(Colors.green, BlendMode.srcIn);
// 保存画布1 canvas.save(); canvas.clipRect( Rect.fromLTWH(60, 60, Screen.width - 120, Screen.width - 120)); canvas.drawColor(Colors.grey, BlendMode.srcIn); // 保存画布2 canvas.save(); canvas.clipRect( Rect.fromLTWH(80, 80, Screen.width - 160, Screen.width - 160)); canvas.drawColor(Colors.orange, BlendMode.srcIn); // canvas.save(); // 恢复画布1 canvas.restore(); // 恢复画布2 canvas.restore(); // canvas.restore(); canvas.drawColor(Colors.blue, BlendMode.srcIn);
Canvas 非常强大,还有很多研究不透彻的地方,小菜仍在不断学习,有错误的地方烦请多多指点!
转载于:https://www.cnblogs.com/Free-Thinker/p/10824992.html
Flutter 36: 图解自定义 View 之 Canvas (三)相关推荐
- Flutter 34: 图解自定义 View 之 Canvas (一)
小菜最近在学习自定义 View,刚了解了一下 Paint 画笔的神奇之处,现在学习一下 Canvas 画布的神秘之处.Flutter 提供了众多的绘制方法,小菜接触不深,尽量都尝试一下. Canvas ...
- 自定义View之Canvas(画布)的详解
接下来学习一下自定义View之Canvas(画布)的详解 先来看看Canvas常用方法: 功能分类 Canvas常用方法 备注 绘制颜色 drawARGB 通过设置ARGB值绘制颜色 drawRGB ...
- 安卓自定义View进阶-Canvas之图片文字
在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法,本次了解一些绘制图片文字相关的内容.如果你对前几篇文章讲述的内容熟练掌握的话,那么恭喜你,本篇结束之后,大部分的自定义View已经 ...
- Android自定义View之Canvas绘制基本图形(二)-- 自定义时钟
前言 前面一篇主要是巩固Cavas绘制基本图形(如直线,矩形,点等等),今天同样是复习Cavas画圆,圆弧,等等,但是今天会多了一个path,以及Canvas画布的旋转.缩放.平移等等,画布的保存(s ...
- 自定义View进阶-Canvas之图片文字
在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法,本次了解一些绘制图片文字相关的内容.如果你对前几篇文章讲述的内容熟练掌握的话,那么恭喜你,本篇结束之后,大部分的自定义View已经 ...
- Android自定义View:ViewGroup(三)
自定义ViewGroup本质是什么? 自定义ViewGroup本质上就干一件事--layout. layout 我们知道ViewGroup是一个组合View,它与普通的基本View(只要不是ViewG ...
- android 自定义view使用Canvas实现支付宝咻一咻功能
昨天写了一篇关于支付宝咻一咻的功能,但是一直想通过使用Canvas来实现它,之前有的地方没想通,今天突然想通了,今天就自定义继承view而不是继承ViewGroup或者容器view来实现,但是也有个缺 ...
- 自定义View实现Canvas炫酷效果
效果: 整个效果分为旋转.扩散聚合.水波纹效果,首先在定义好一些变量后,要先定义一个抽象类SplashState,提供抽象方法drawState供子类实现. /*** 这个抽象类,对外提供drawSt ...
- android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
最新文章
- 第二章:SpringBoot与JSP间不可描述的秘密
- SSL certificate problem: unable to get local issuer certificate
- python手机销售系统详细设计_数据库详细设计文档 .doc
- 01.query的分类-条件查询和组合查询
- 这张磁盘有写保护_u盘被写保护怎么解除 磁盘被写保护怎么解除
- 关于浮动float属性和position:absolute属性的区别
- Topcoder SRM 648 (div.2)
- linux模拟网络延迟,使用Nistnet搭建网络延迟模拟设备 (network delay simulator)
- 斐波那契数的皮萨诺周期
- java Vector.toArray 与强制类型转换
- Photoshop插件-删除所有亮度通道蒙板-脚本开发-PS插件
- 汽车半导体器件AECQ认证测试及相关标准和表格文件
- CF 贪心+dp(动态规划) 01背包(做与不做)
- 在线支付系列【2】支付宝和微信支付发展史
- BUUCTF [GXYCTF2019]Ping Ping Ping 1
- List、Collections
- linux环境怎么更新离线rpm包,SUSE Linux 11系统rpm包离线安装GCC
- ubuntu完全卸载CUDA
- 使用sass预处理器的优劣
- K8S CoreDNS