flutter路径的用法（下）
发布时间 - 2025-07-12 00:00:00 点击率：次本节目标：
了解路径的各种操作和测量方法，掌握其在Flutter中的应用。
一、路径操作
-
close、reset、shift
// [p06_path/12_close_reset_shift/paper.dart] Path path = Path(); Paint paint = Paint() ..color = Colors.purpleAccent ..strokeWidth = 2 ..style = PaintingStyle.stroke;path ..lineTo(100, 100) ..relativeLineTo(0, -50) ..close();
canvas.drawPath(path, paint); canvas.drawPath(path.shift(Offset(100, 0)), paint); canvas.drawPath(path.shift(Offset(200, 0)), paint);
-
contains和getBounds
// [p06_path/13_getBounds_contains/paper.dart] Path path = Path(); Paint paint = Paint() ..color = Colors.purple ..style = PaintingStyle.fill;path ..relativeMoveTo(0, 0) ..relativeLineTo(-30, 120) ..relativeLineTo(30, -30) ..relativeLineTo(30, 30) ..close();
canvas.drawPath(path, paint); print(path.contains(Offset(20, 20))); print(path.contains(Offset(0, 20)));
Rect bounds = path.getBounds(); canvas.drawRect( bounds, Paint() ..color = Colors.orange ..style = PaintingStyle.stroke ..strokeWidth = 1 );
-
Path#transform: 路径变换
// [p06_path/14_getBounds_contains/paper.dart] Path path = Path(); Paint paint = Paint() ..color = Colors.purple ..style = PaintingStyle.fill;path ..relativeMoveTo(0, 0) ..relativeLineTo(-30, 120) ..relativeLineTo(30, -30) ..relativeLineTo(30, 30) ..close();
for(int i = 0; i < 4; i++) { canvas.drawPath(path, paint); canvas.translate(100, 0); path = path.transform(Matrix4.rotationZ(0.1 * i).storage); }
-
combine: 路径联合
// [p06_path/15_combine/paper.dart] Path path = Path(); Paint paint = Paint(); paint ..color = Colors.purple ..style = PaintingStyle.fill;path ..relativeMoveTo(0, 0) ..relativeLineTo(-30, 120) ..relativeLineTo(30, -30) ..relativeLineTo(30, 30) ..close();
var pathOval = Path()..addOval(Rect.fromCenter(center: Offset(0, 0), width: 60, height: 60));
canvas.drawPath(Path.combine(PathOperation.difference, path, pathOval), paint); canvas.translate(120, 0); canvas.drawPath(Path.combine(PathOperation.intersect, path, pathOval), paint); canvas.translate(120, 0); canvas.drawPath(Path.combine(PathOperation.union, path, pathOval), paint); canvas.translate(-120*3.0, 0); canvas.drawPath(Path.combine(PathOperation.reverseDifference, path, pathOval), paint); canvas.translate(-120, 0); canvas.drawPath(Path.combine(PathOperation.xor, path, pathOval), paint);
二、路径测量的使用
- 认识
Path#computeMetrics
// [p06_path/16_computeMetrics/paper.dart] Path path = Path(); path ..relativeMoveTo(0, 0) ..relativeLineTo(-30, 120) ..relativeLineTo(30, -30) ..relativeLineTo(30, 30) ..close();path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
PathMetrics pms = path.computeMetrics(); Tangent t; pms.forEach((pm) { print("---length:-${pm.length}----contourIndex:-${pm.contourIndex}----contourIndex:-${pm.isClosed}----"); });
// [打印日志] // ---length:-332.2391357421875----contourIndex:-0----contourIndex:-true---- // ---length:-156.0674285888672----contourIndex:-1----contourIndex:-true----
- 路径测量获取路径某位置信息
Paint paint = Paint() ..color = Colors.purple ..strokeWidth = 1 ..style = PaintingStyle.stroke;Path path = Path(); path ..relativeMoveTo(0, 0) ..relativeLineTo(-30, 120) ..relativeLineTo(30, -30) ..relativeLineTo(30, 30) ..close();
path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
PathMetrics pms = path.computeMetrics(); pms.forEach((pm) { Tangent tangent = pm.getTangentForOffset(pm.length * 0.5); print( "---position:-${tangent.position}----angle:-${tangent.angle}----vector:-${tangent.vector}----" ); canvas.drawCircle( tangent.position, 5, Paint()..color = Colors.deepOrange ); });
canvas.drawPath(path, paint);
// [打印日志] // ---position:-Offset(0.0, 90.0)----angle:-0.7853981633974483----vector:-Offset(0.7, -0.7)---- // ---position:-Offset(-25.0, 0.0)----angle:-1.5707963267948966----vector:-Offset(0.0, -1.0)----
- 路径测量和动画结合
// [p06_path/17_computeMetrics_anim/paper.dart]
class Paper extends StatefulWidget {
@override
_PaperState createState() => _PaperState();
}class _PaperState extends State with SingleTickerProviderStateMixin {
AnimationController _ctrl;
@override
void initState() {
super.initState();
_ctrl = AnimationController(duration: Duration(seconds: 3), vsync: this)
..forward();
}
@override
void dispose() {
_ctrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(progress: _ctrl),
),
);
}
}
class PaperPainter extends CustomPainter {
final Animation progress;
PaperPainter({this.progress}) : super(repaint: progress);
@override
void paint(Canvas canvas, Size size) {
canvas.translate(size.width / 2, size.height / 2);
Paint paint = Paint()
..color = Colors.purple
..strokeWidth = 1
..style = PaintingStyle.stroke;
Path path = Path();
path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();
path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
PathMetrics pms = path.computeMetrics();
pms.forEach((pm) {
Tangent tangent = pm.getTan
gentForOffset(pm.length * progress.value);
canvas.drawCircle(
tangent.position, 5, Paint()..color = Colors.deepOrange
);
});
canvas.drawPath(path, paint);}
@override
bool shouldRepaint(PaperPainter oldDelegate) => oldDelegate.progress != progress;
}
# linux
# ai
# bool
# transform
# flutter
# 本节
# 测量方法
# orange
# bounds
# drawRect
# rotationZ
# int
# translate
# fill
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复
Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)
如何在IIS服务器上快速部署高效网站？
微信公众帐号开发教程之图文消息全攻略
Laravel Session怎么存储_Laravel Session驱动配置详解
如何在 Pandas 中基于一列条件计算另一列的分组均值
实例解析angularjs的filter过滤器
Laravel如何使用.env文件管理环境变量？（最佳实践）
Laravel怎么使用Intervention Image库处理图片上传和缩放
如何用虚拟主机快速搭建网站？详细步骤解析
CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】
如何快速查询域名建站关键信息？
详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南
Win11怎么开启自动HDR画质_Windows11显示设置HDR选项
韩国服务器如何优化跨境访问实现高效连接？
Laravel如何使用查询构建器？（Query Builder高级用法）
js实现点击每个li节点，都弹出其文本值及修改
Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理
再谈Python中的字符串与字符编码（推荐）
使用豆包 AI 辅助进行简单网页 HTML 结构设计
Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】
Laravel distinct去重查询_Laravel Eloquent去重方法
阿里云网站搭建费用解析：服务器价格与建站成本优化指南
什么是javascript作用域_全局和局部作用域有什么区别？
Laravel如何优化应用性能？（缓存和优化命令）
Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】
html如何与html链接_实现多个HTML页面互相链接【互相】
html5如何实现懒加载图片_ intersectionobserver api用法【教程】
Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】
网站制作大概要多少钱一个,做一个平台网站大概多少钱？
Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件
如何用wdcp快速搭建高效网站？
phpredis提高消息队列的实时性方法(推荐)
LinuxCD持续部署教程_自动发布与回滚机制
Laravel如何与Pusher实现实时通信？（WebSocket示例）
google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤
Mybatis 中的insertOrUpdate操作
Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践
JS中对数组元素进行增删改移的方法总结
Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言
原生JS实现图片轮播切换效果
Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】
如何用搬瓦工VPS快速搭建个人网站？
Java类加载基本过程详细介绍
QQ浏览器网页版登录入口 个人中心在线进入
如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环
矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？
高端智能建站公司优选：品牌定制与SEO优化一站式服务
油猴 教程,油猴搜脚本为什么会网页无法显示？
如何在腾讯云服务器快速搭建个人网站？
gentForOffset(pm.length * progress.value);
canvas.drawCircle(
tangent.position, 5, Paint()..color = Colors.deepOrange
);
});
canvas.drawPath(path, paint);