首页 > 运维 > linux运维 > 正文

flutter路径的用法(下)

爱谁谁
发布: 2025-07-12 09:20:01
原创
503人浏览过

本节目标:

了解路径的各种操作和测量方法,掌握其在Flutter中的应用。


一、路径操作

flutter路径的用法(下)

  1. close、reset、shift

flutter路径的用法(下)

// [p06_path/12_close_reset_shift/paper.dart]
Path path = Path();
Paint paint = Paint()
  ..color = Colors.purpleAccent
  ..strokeWidth = 2
  ..style = PaintingStyle.stroke;
<p>path
..lineTo(100, 100)
..relativeLineTo(0, -50)
..close();</p><p>canvas.drawPath(path, paint);
canvas.drawPath(path.shift(Offset(100, 0)), paint);
canvas.drawPath(path.shift(Offset(200, 0)), paint);
登录后复制
  1. contains和getBounds

flutter路径的用法(下)

// [p06_path/13_getBounds_contains/paper.dart]
Path path = Path();
Paint paint = Paint()
..color = Colors.purple
..style = PaintingStyle.fill;</p><p>path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();</p><p>canvas.drawPath(path, paint);
print(path.contains(Offset(20, 20)));
print(path.contains(Offset(0, 20)));</p><p>Rect bounds = path.getBounds();
canvas.drawRect(
bounds,
Paint()
..color = Colors.orange
..style = PaintingStyle.stroke
..strokeWidth = 1
);
登录后复制
  1. Path#transform: 路径变换

flutter路径的用法(下)

// [p06_path/14_getBounds_contains/paper.dart]
Path path = Path();
Paint paint = Paint()
..color = Colors.purple
..style = PaintingStyle.fill;</p><p>path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();</p><p>for(int i = 0; i < 4; i++) {
canvas.drawPath(path, paint);
canvas.translate(100, 0);
path = path.transform(Matrix4.rotationZ(0.1 * i).storage);
}
登录后复制
  1. combine: 路径联合

flutter路径的用法(下)

// [p06_path/15_combine/paper.dart]
Path path = Path();
Paint paint = Paint();
paint
..color = Colors.purple
..style = PaintingStyle.fill;</p><p>path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();</p><p>var pathOval = Path()..addOval(Rect.fromCenter(center: Offset(0, 0), width: 60, height: 60));</p><p>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);
登录后复制

二、路径测量的使用

  1. 认识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();</p><p>path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));</p><p>PathMetrics pms = path.computeMetrics();
Tangent t;
pms.forEach((pm) {
print("---length:-${pm.length}----contourIndex:-${pm.contourIndex}----contourIndex:-${pm.isClosed}----");
});</p><p>// [打印日志]
// ---length:-332.2391357421875----contourIndex:-0----contourIndex:-true----
// ---length:-156.0674285888672----contourIndex:-1----contourIndex:-true----
登录后复制
  1. 路径测量获取路径某位置信息

flutter路径的用法(下)

Paint paint = Paint()
..color = Colors.purple
..strokeWidth = 1
..style = PaintingStyle.stroke;</p><p>Path path = Path();
path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();</p><p>path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));</p><p>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
);
});</p><p>canvas.drawPath(path, paint);</p><p>// [打印日志]
// ---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)----
登录后复制
  1. 路径测量和动画结合

flutter路径的用法(下)

// [p06_path/17_computeMetrics_anim/paper.dart]
class Paper extends StatefulWidget {
@override
_PaperState createState() => _PaperState();
}</p><p>class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
AnimationController _ctrl;</p><p>@override
void initState() {
super.initState();
_ctrl = AnimationController(duration: Duration(seconds: 3), vsync: this)
..forward();
}</p><p>@override
void dispose() {
_ctrl.dispose();
super.dispose();
}</p><p>@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(progress: _ctrl),
),
);
}
}</p><p>class PaperPainter extends CustomPainter {
final Animation<double> progress;</p><p>PaperPainter({this.progress}) : super(repaint: progress);</p><p>@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;</p><pre class="brush:php;toolbar:false">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 * progress.value);
  canvas.drawCircle(
    tangent.position, 5, Paint()..color = Colors.deepOrange
  );
});

canvas.drawPath(path, paint);
登录后复制

}

@override bool shouldRepaint(PaperPainter oldDelegate) => oldDelegate.progress != progress; }

以上就是flutter路径的用法(下)的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号