Flutter绘制指南05-图形的路径添加
本节目标
[1].了解如何通过移动路径形成形状:直线运动。圆弧运动。圆锥曲线运动。贝塞尔曲线运动
[2].了解路径的【绝对运动】和【相对运动】
[3].了解已经在已有的路径中添加其他形状: 添加矩形,圆角矩形,椭圆圆弧,其他路径
[4]. 使用path绘制坐标系
一、路径加入方法
下面是路径形成的基础方法,包括路径的
移动、加入直线、圆弧、圆锥曲线、贝塞尔曲线
对这些API的掌握程度.直接决定你使用路径的能力.
1、moveTo和lineTo画线
下面画布已经到了屏幕中心,并且Y轴正下方。想象以下,你现在手里面拿着一支笔。
moveTo相当于提起笔落到纸上的目标位置。并且坐标以画布原点为参考系。
lineTo相当于从落笔点画直线到期望的坐标点。并且坐标以画布原点为参考系
实现代码
void drawRectangle(Canvas canvas){Path path=Path();Paint paint=Paint()..color=Colors.deepPurpleAccent..style=PaintingStyle.fill;path..moveTo(0, 0)..lineTo(60, 80)..lineTo(60, 0)..lineTo(0, -80)..close();canvas.drawPath(path, paint);paint..style=PaintingStyle.stroke..strokeWidth=2;path..moveTo(0,0)..lineTo(-60, 80)..lineTo(-60, 0)..lineTo(0, -80);canvas.drawPath(path, paint);}
2. relativeMoveTo和relativeLineTo相对画线
如果点位已经知道,使用moveTo和lineTo会比较方便。但是很多情况下是不能直接知道的
比如在某点的基础上,画一条线.要求左移10,上移60，这样的点位很难直接确定
使用relative系列方法就会非常的简单.如下的图形绘制.不用相对坐标就会很复杂
使用相对坐标会更加容易调整(左侧只需起点就可以全部移动)
代码实现
// 通过相对于其他图形的位置 我们来绘制图形。void drawRelativeRectangle(Canvas canvas){Path path=Path();Paint paint=Paint();path..relativeMoveTo(0, 0)..relativeLineTo(100, 120)..relativeLineTo(-10, -60)..relativeLineTo(60, -10);paint..color=Colors.green..style=PaintingStyle.fill;canvas.drawPath(path, paint);path.reset();paint..style=PaintingStyle.stroke..color=Colors.green..strokeWidth=2;path..relativeMoveTo(-200, 0)..relativeLineTo(100, 120)..relativeLineTo(-10, -60)..relativeLineTo(60, -10)..close();canvas.drawPath(path, paint);}
3. arcTo圆弧
arcTo用于指定圆弧路径,指定一个矩形区域，形成椭圆。
指定起始弧度和扫描弧度,就可以从椭圆上截取出圆弧
最后一参代表是否强行移动,如果为true，如图左,绘制圆弧的时候就会先移动到起点。
//绘制圆弧void drawArcRectangle(Canvas canvas){Path path=Path();Paint paint=Paint();paint..color=Colors.purpleAccent..strokeWidth=2..style=PaintingStyle.stroke;var rect=Rect.fromCenter(center: Offset(0,0), width: 160, height: 160);path.lineTo(30, 30);path.arcTo(rect, 0, pi*1.5, true);canvas.drawPath(path, paint);path.reset();canvas.translate(200, 0);path.lineTo(30, 30);path.arcTo(rect, pi*.5, pi*1.5, false);canvas.drawPath(path, paint);}
4. arcToPoint和relativeArcToPoint定点弧
当想要画圆弧到某一个点,用arcToPoint会非常的方便
接受一个定点入参Offset,是圆弧的终点,可指定圆弧半径radius、是否使用优狐,是否顺时针
左侧: 使用优弧：largeArc: false,逆时针:clockwise:false
中间: 使用劣弧: largeArc:false.顺时针:clockwise:true
右侧使用优弧：largeArc:true,顺时针:clockwise:true
代码实现
// 绘制优弧、劣弧，展现不同的圆弧void drawGoodOrBadRectangle(Canvas canvas){Path path=Path();Paint paint=Paint()..color=Colors.purpleAccent..strokeWidth=2..style=PaintingStyle.stroke;path.lineTo(80, -40);path..arcToPoint(Offset(40, 40),radius: Radius.circular(60),largeArc: false)..close();canvas.drawPath(path, paint);path.reset();canvas.translate(-150, 0);// 绘制左侧path.lineTo(80, -40);path..arcToPoint(Offset(40, 40),radius: Radius.circular(60),largeArc: true,clockwise: false)..close();canvas.drawPath(path, paint);path.reset();canvas.translate(150+150.0, 0);path.lineTo(80, -40);path..arcToPoint(Offset(40, 40),radius: Radius.circular(60),largeArc: true)..close();canvas.drawPath(path, paint);}
relativeArcToPoint方法就是使用的时候更具相对位置来加入圆弧路径。参数含义与上面一致。
5. conicTo和relativeConicTo:圆弧曲线
conic接受5个参数用于ui之圆锥曲线,包括椭圆线、抛物线和双曲线
其中前面两个参数是控制点，三四个参数是结束点,第五个参数是权重.
当权重<1的时候,圆锥曲线是椭圆线,如左下图
当权重=1的时候,圆锥曲线是抛物线,如下中图
当权重>1的时候,圆锥曲线是双曲线,如下右图
void drawLastRectangle(Canvas canvas){final Offset p1=Offset(80,-100);final Offset p2=Offset(160, 0);Path path=Path();Paint paint=Paint();paint..color=Colors.purpleAccent..strokeWidth=2..style=PaintingStyle.stroke;path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1);canvas.drawPath(path, paint);path.reset();canvas.translate(-180, 0);paint..color=Colors.purpleAccent..strokeWidth=2..style=PaintingStyle.stroke;path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 0.5);canvas.drawPath(path, paint);path.reset();canvas.translate(180+180, 0);paint..color=Colors.purpleAccent..strokeWidth=2..style=PaintingStyle.stroke;path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1.5);canvas.drawPath(path, paint);path.reset();}
Flutter绘制指南05-图形的路径添加相关推荐
- Flutter绘制指南09-动画曲线和方法
本节目标 [1] 认识动画器[曲线速率]的作用 [2] 绘制出Flutter内置的所有曲线效果常量 [3] 了解动画器的常用方法 [4] 了解动画器的状态,以及状态变化监听 一.动画速率曲线 动画曲线 ...
- Flutter绘制指南10-手势在绘制中的使用
本节目标 [1]. 了解手势在画布中的使用方式 [2]. 练习绘制,并根据手指滑动完成控制杆的绘制 [3]. 练习绘制,并根据手指滑动完成[刻度尺]的绘制 [4]. 了解如何限制绘制区域 一.控制柄组 ...
- Flutter绘制指南06-颜色的基本操作
本节目标 [1]. 认识Dart中的颜色表示方式 [2]. 了解颜色,[混合模式]的坐拥1 [3]. 了解如何读取图片中的像素颜色 一. 认识颜色 Color类在dart.ui包下,在Dart里面,颜 ...
- 【CV 向】OpenCV 图形绘制指南
文章目录 引言 1. 创建画布 2. 绘制线段 3. 绘制矩形 4. 绘制圆 5. 绘制椭圆 6. 绘制多边形 7. 绘制字体 结论 引言 Python OpenCV 是一个功能强大的计算机视觉库,除 ...
- Flutter开发指南之理论篇：Dart语法04（库，异步，正则表达式）
总目录 Flutter开发指南之理论篇:Dart语法01(数据类型,变量,函数) Flutter开发指南之理论篇:Dart语法02(运算符,循环,异常) Flutter开发指南之理论篇:Dart语法0 ...
- Flutter学习指南：文件、存储和网络
Flutter学习指南 交互.手势和动画 UI布局和控件 熟悉Dart语言 编写第一个应用 开发环境搭建 本篇文章我们先学习 Flutter IO 相关的基础知识,然后在 Flutter学习指南:交互 ...
- 可视化篇（二）———使用matplotlib绘制常用3D图形及案例
可视化篇(二)---使用matplotlib绘制常用3D图形及案例 摘要 (一)添加matplotlib 3D模块 (二)3d图中绘制曲线 (三)3d图中绘制散点图 (四)3d图中绘制线框图 (五)3 ...
- 【Qt】2D绘图之绘制简单的图形
00. 目录 文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制图形 04. 画笔和画刷 05. 绘制弧线 06. 附录 01. 概述 Qt中提供了强大的2D绘图系统,可以使用同一A ...
- 安卓学习笔记31：使用自定义视图绘制文本、图形与图像
文章目录 零.学习目标 一.自定义视图 (一)自定义视图概述 (二)使用自定义视图基本步骤 (三)案例演示 - 使用自定义视图绘制圆 1.创建安卓应用[DrawCircle] 2.创建自定义视图 - ...
最新文章
- 1月6日 作业 穷举
- 软件测试作业1：正确理解原型方法对软件生命周期不同阶段的支持
- TypeScript里get属性的实现
- linux线程基础篇----线程同步与互斥
- 金山云纳斯达克敲钟上市 不负时代的机遇
- 【华为解决方案】 华为云架构解决方案
- Python爬虫之（一）：爬虫简介
- oracle plsql update两个字段_Oracle 学习笔记（Windows 环境下安装 + PL/SQL）
- 装饰器模式在 Collections 类中的应用
- Java类获取Spring容器的bean
- ubuntu14.04 安装adb 调试设备
- MOOC 浙江大学C语言翁恺（第一、二章 满分答案）
- java浮点类型数据运算并保留小数点后几位工具类
- ArcGIS教程：基于ArcGIS的CAD数据向GIS数据转换方法
- 设置jsp打开的默认方式
- 关于360插件化框架Replugin竖屏修改为横屏解决方案
- 01- 初识MySQL
- 【404 App】2.0全新版本正式来袭之ALL模块。
- Java通过URL同步头像（总结）
- ECC与数论、数论史、代数，二次剩余符号的程序计算，高次剩余，高斯和 2013-03-23 21:52:49
热门文章
- 如何看linux是arm还是amd_享受还是想瘦？看游泳如何让你“享瘦”
- QQ相册(html)实例详述----Div布局
- Q_ENUM与Q_ENUMS的区别
- Error: Can't place multiple pins assigned to pin location……解决办法
- python输入一个英文句子、求其中最长的单词的changd_数组练习
- How to download dynamically loaded content using python
- ios和Android端ijkplayer集成及使用
- 文件重命名后缀名没法改，教你轻松解决方法
- MATLAB数学建模：数据图形可视化-三维绘图函数
- 汇编51单片机密码锁（含论文、程序、AD图）单片机课程设计