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 非常强大,还有很多研究不透彻的地方,小菜仍在不断学习,有错误的地方烦请多多指点!
Flutter 36: 图解自定义 View 之 Canvas (三)的更多相关文章
- Flutter 34: 图解自定义 View 之 Canvas (一)
小菜最近在学习自定义 View,刚了解了一下 Paint 画笔的神奇之处,现在学习一下 Canvas 画布的神秘之处.Flutter 提供了众多的绘制方法,小菜接触不深,尽量都尝试一下. Canvas ...
- Flutter 35: 图解自定义 View 之 Canvas (二)
小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...
- 安卓自定义View进阶-Canvas之画布操作 转载
安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...
- Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解
上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...
- 自定义View之Canvas使用
自定义View的绘制流程一般都是这样:提前创建好Paint对象,重写onDraw(),把绘制代码卸载ondraw()里面,大致如下: Paint paint = new Paint(); @Overr ...
- Android进阶之绘制-自定义View完全掌握(三)
自定义View系列的第三篇博客,我们来学习如何实现自定义下拉框. 今天的程序,我们来实现这样的一个效果. 布局非常简单,我们直接开始编码. 修改activity_main.xml文件的代码. < ...
- Android自定义View学习(三)
属性动画(上) 参考:HenCoder 自定义绘制的第 1-6 期:属性动画 Property Animation(上手篇) Interpolator 其实就是速度设置器,设置动画运行的速度. 属性动 ...
- 自定义View(4)Canvas和Paint常用绘制函数
画布Canvas 在Android下进行2D绘图需要Canvas类的支持,它位于"android.graphics.Canvas"包下,直译过来为画布的意思,用于完成在View上的 ...
- Android 自定义 View 圆形进度条总结
Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...
随机推荐
- MyISAM与InnoDB之间的区别
区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...
- pch文件的添加
想说试了好久一直报错找不到文件,解决方法如下: 依次是:./项目名/文件夹名称/pch文件名
- antd二级联动异步加载
/** * Created by Admin on 2016/9/19. * 批量导入 */ import React, {Component, PropTypes} from "react ...
- iOS面试-关于秒退
1 为什么很多的 iOS app 都有秒退现象?有什么好方法避免它?有哪些好方法避免这种现象吗? 问题里的“秒退”如果我没理解错,应该是指程序显示完默认启动图片后,在初始化阶段就崩溃了(也可以叫“闪退 ...
- jprofile 远程监控linux上的jvm
环境 客户端:win7+jprofiler_windows-x64_10_0_4.exe linux服务器:tomcat7+jdk1.7+jprofiler_linux_10_0_4.sh 一.客户端 ...
- WordPress自定义菜单和修改去除多余的css
这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了. 所以我们在模板制作过程中,需要自定义WordPress菜单. 在functions.php文件中 ...
- QueryPerformanceFrequency 基本介绍精确获取时间
精确获取时间: QueryPerformanceFrequency() - 基本介绍 类型:Win32API 原型:BOOL QueryPerformanceFrequency(LARGE_INTEG ...
- 带你手写基于 Spring 的可插拔式 RPC 框架(五)注册中心
注册中心代码使用 zookeeper 实现,我们通过图片来看看我们注册中心的架构. 首先说明, zookeeper 的实现思路和代码是参考架构探险这本书上的,另外在 github 和我前面配置文件中的 ...
- [转帖]Vim全键盘操作
https://www.cnblogs.com/pzqu/p/11416436.html Vim脱离鼠标第一步 平时不可缺少的会用到vim,但是避免不了鼠标,事实上,省略鼠标是完全可以的,没有想像中那 ...
- random、range和len函数的使用
random.range和len函数的使用 一.random函数 1.random.random()和random.Random(): import random num = random.rando ...