本节目标：
了解路径的各种操作和测量方法，掌握其在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);
二、路径测量的使用
法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。
31 查看详情 
认识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;
@overridevoid initState() {super.initState();_ctrl = AnimationController(duration: Duration(seconds: 3), vsync: this)..forward();}
@overridevoid dispose() {_ctrl.dispose();super.dispose();}
@overrideWidget 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);
@overridevoid 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.getTangentForOffset(pm.length * progress.value); canvas.drawCircle( tangent.position, 5, Paint()..color = Colors.deepOrange );});canvas.drawPath(path, paint);
}
@overridebool shouldRepaint(PaperPainter oldDelegate) => oldDelegate.progress != progress;}
以上就是flutter路径的用法（下）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/300011.html
微信扫一扫 
支付宝扫一扫 
