Flutter 36: 图解自定义 View 之 Canvas (三)

小菜继续学习 Canvas 的相关方法:

drawVertices 绘制顶点

      小菜上次没有整理 drawVertices 的绘制方法,这次补上;Vertice 即顶点,通过绘制多个顶点,在进行连线,多用于 3D 模型中;

      drawVertices 包括三个参数,第一个是顶点属性,根据不同属性线的连接方式也不同;第二个是混合模式,即线的颜色与背景色混合效果;第三个是画笔,小菜测试调整 Paint 线的粗细无法调整整体连线的粗细;

      小菜借用 A B C D E F G H I 顶点来简单介绍:

  1. VertexMode.triangles:每三个分割顶点相连,即 [A B C] [D E F] [G H I] 共 3 组;
  2. VertexMode.triangleStrip:每相邻的三个顶点相连,即 [A B C] [B C D] [C D E] [D E F] [E F G] [F G H] [G H I] 共 7 组;
  3. 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/393812.shtml

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

相关文章

sphinx 项目根目录_如何使用Sphinx工具记录Django项目

sphinx 项目根目录I recently visited a company where I had a nice talk with one of its employees. We talked about technology and programming. Then we touched the subject of project documentation. Specifically how React does it automatically but Django doesn…

程序员必知之浮点数运算原理详解

导读:浮点数运算是一个非常有技术含量的话题,不太容易掌握。许多程序员都不清楚使用操作符比较float/double类型的话到底出现什么问题。 许多人使用float/double进行货币计算时经常会犯错。这篇文章是这一系列中的精华,所有的软件开发人员都应…

axure选中后横线切换_3、开关状态切换 —— Axure实用交互

写在开头:开关的制作在几乎所有原型设计中都会用到,所以美观自然的交互开关可以给你的原型设计加分不少。本次开关设计主要用到的是逻辑为:选中状态的切换首先,来看一下演示动画开始原型设计一、创建元件首先需要打开Axure软件,并…

Django框架——模型(数据库操作)

-- models.py-- ORM(object-relation mapping) 实现数据模型与数据库的解耦;# 对象,关系,映射;1.根 据对象的类型生成表结构;2.将对象、列表的操作,转换为sql语句;3.将sql查询到的结果转换为对象…

leetcode140. 单词拆分 II(回溯+记忆化)

给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中。返回所有这些可能的句子。 说明: 分隔时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 …

#loj 3058 [HNOI2019] 白兔之舞

单位根反演思博题 模数是乱给的记得整个任意模数ntt k为p-1的约数意味着一定存在k次单位根,设g是p的原根则\(w_{k}^{1}g^{\frac{k-1}{p}}\) 既然k次单位根存在自然考虑单位根反演了 设\(f(i)\)表示跳了i步并且停在了第二维为y的顶点的方案数 设\(st\)表示初始向量而…

标杆徐2018 Linux自动化运维实战,标杆徐2018 Linux自动化运维系列⑦: SaltStack自动化配置管理实战...

结合企业自动化集群场景讲解,轻松玩转SaltStack自动化配置管理工具第1章 SaltStack基础应用SaltStack安装SaltStack认证Saltstack远程执行SaltStack配置管理第2章 SaltStack数据系统SaltStack数据系统-Grains 客户端向服务端发送状态SaltStack数据系统-paiil 服务…

JS 对象引用问题

var a {n:1}; var b a; a {n:2}; a.x a ;console.log(a.x);console.log(b.x); var a {n:1}; var b a; a.x a {n:2}; console.log(a.x);console.log(b.x); 这两个问题主要理解两点就很简单了。 对象是引用类型,改变赋值只是改变指针的引用。运算符相当于改变…

工程代码_Egret开发笔记(二)基础工程代码阅读

代码目录结构在Egret Wing中打开上一节中我们创建的项目工程,查看代码目录结构,Forward在如下图中标记了各个目录的及关键文件的用途。代码阅读理解接下来我们从web入口一步一步阅读初始代码。首先打开index.html文件,我们看到index文件内容如…

知晓云助力小程序开发

小程序开发遇到瓶颈虽然腾讯提供了小程序解决方案,https://cloud.tencent.com/solution/la。但是对于普通开发者或者小企业的开发人员来说,购买域名,网站备案、部署SSL证书,安装会话服务器。业务逻辑上要使用数据库,缓…

leetcode131. 分割回文串(回溯)

给定一个字符串 s&#xff0c;将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: “aab” 输出: [ [“aa”,“b”], [“a”,“a”,“b”] ] 代码 class Solution {List<List<String>> stringListnew ArrayList…

Cracer渗透-windows基础(系统目录,服务,端口,注册表)

系统目录C:\Windows\system32\config\SAM (保存系统密码) 无法正常修改&#xff0c;可以进入PE系统进行修改&#xff08;先备份在清空&#xff09;利用结束后&#xff0c;再将之前备份的恢复C:\Windows\System32\drivers\hosts&#xff08;域名解析文件&#xff09;hosts欺骗&a…

java--xml文件读取(SAX)

SAX解析原理&#xff1a; 使用Handler去逐个分析遇到的每一个节点 SAX方式解析步奏&#xff1a; 创建xml解析需要的handler&#xff08;parser.parse(file,handler)&#xff09; package com.imooc_xml.sax.handler;import java.util.ArrayList;import org.xml.sax.Attributes…

算法训练营 重编码_编码训练营之后该做什么-以及如何获得成功

算法训练营 重编码by Anthony Morris安东尼莫里斯(Anthony Morris) 编码训练营之后该做什么-以及如何获得成功 (What to do — and how to find success — after a coding bootcamp) It’s almost been two years since I graduated from the Lighthouse Labs Web Developmen…

leetcode860. 柠檬水找零(贪心)

在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。 顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xff0c;然后向你付 5 美元、10 美元或 20 美元。你必须给每个顾客正确找零&#xff0…

linux防火墙开启某端口命令行,linux上防火墙 开启某个端口

linux下防火墙 开启某个端口直接在/etc/sysconfig/iptables中增加一行&#xff1a;-A RH-Firewall-1-INPUT -m state –state NEW -m tcp -p tcp –dport 8080 -j ACCEPT注意添加位置:-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 25 -j ACCEPT-A RH-Fi…

imp命令导入指定表_Sqoop 使用shell命令的各种参数的配置及使用方法

点击上方蓝色字体&#xff0c;选择“设为星标”回复”资源“获取更多资源本文作者&#xff1a;Sheep Sun本文链接&#xff1a;https://www.cnblogs.com/yangxusun9/p/12558683.html大数据技术与架构点击右侧关注&#xff0c;大数据开发领域最强公众号&#xff01;暴走大数据点击…

黑客频繁来袭 关注云计算的安全与保障

本文讲的是 : 黑客频繁来袭 关注云计算的安全与保障 , 【IT168 资讯】日前&#xff0c;虎嗅网遭受网络攻击的事件&#xff0c;引起业内关注。2月27日晚&#xff0c;虎嗅网中断访问&#xff0c;虎嗅网新浪官方微博随即发表声明&#xff0c;表示网站受到恶意攻击&#xff0c;随…

51nod 1100:斜率最大

题目链接 斜率最大点对横坐标必相邻 #include <bits/stdc.h> using namespace std; const int maxn 1e4 100;struct point {int x, y, pos;bool operator < (const point& rhs)const{return x<rhs.x;} } a[maxn]; double xielv(point a, point b) {return (a…

ik分词和jieba分词哪个好_Pubseg:一种单双字串的BiLSTM中文分词工具

中文分词是中文自然语言处理中的重要的步骤&#xff0c;有一个更高精度的中文分词模型会显著提升文档分类、情感预测、社交媒体处理等任务的效果[1]。Pubseg是基于BiLSTM中文分词工具&#xff0c;基于ICWS2005PKU语料训练集训练而成&#xff0c;其优点在于在ICWS2005-PKU语料下…