flutter绘制指南04-路径的操作方法

已于 2022-07-20 18:50:15 修改
阅读量675 收藏 2
点赞数
分类专栏： 前端 文章标签： flutter android ios
于 2022-06-19 00:17:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/title_martin/article/details/125353031
版权

本节目标:

[1]. 了解路径的封闭、重置、偏移操作
[2]. 了解路径的[矩形边距]和检测点是否在路径中
[3]. 了解路径的[路径变换]和[路径联合]
[4]. 了解路劲测量的用法和作用

一. 路径操作

路径操作时路径使用中的重要一环。很多路径的特效和复杂路径的拼合都会使用他们

1. close、reset和shift

path#close: 用于将路径的尾点和起点，进行路径封闭
path#reset: 用于将路径进行重置,清除路径内容
path#shift: 指定点Offset将路径进行平移,返回一条新的路径.

在这里插入图片描述

void drawPathShift(Canvas canvas){
    Path path=Path();
    Paint 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);
  }

2. contains和getBounds

Paint和#contains可以判断点Offset在不在路径之内。
这是一个非常好用的方法。可以更具这个方法做一些触点判断或者简单的碰撞检测
Paint#getBounds可以获取当前路径所在的矩形区域

在这里插入图片描述

void drawContainsAndGetBounds(Canvas canvas) {
    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);
  }

3.Path#transform:路径变换

可以用于对称图形,当已经有一部分单体路径,可以更具一个4*4的路径进行变换
可以使用Matrix4对象 进行生成辅助举证。就能够很方便的进行缩放、平移、旋转、斜切等变换效果
在这里插入图片描述

void drawPathTransForm(Canvas canvas){
    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);
    for(int i=0;i<8;i++){
      canvas.drawPath(path.transform(Matrix4.rotationZ(i*pi/4).storage), paint);
    }
  }

4.combine:路径联合

Path#combine用于结合两个路径,并且生成新的路径,可以用于生成复杂的路径.
一共有以下五种联合方式，效果如下图
在这里插入图片描述

void drawPathCombine(Canvas canvas){
    Paint paint=Paint();
    Path path=Path();
    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);
    canvas.drawPath(Path.combine(PathOperation.reverseDifference, path, pathOval),paint);

    canvas.translate(-120,0);
    canvas.drawPath(Path.combine(PathOperation.xor, path, pathOval),paint);
  }

二. 路径测量的使用

computeMetrics是路径中一个非常实用的操作，可以更具这个方法获得很多有价值的信息。比如路径上某点在路径上的位置、角度、路径长度等。通过这些与动画结合,可以做出环路径运动.路径绘制动画等效果。

1.认识Path#computeMetrics

通过path.computeMetrics(),可以获取一个课迭代的PathMetrics类对象。它迭代出的是PathMetric对象。也就是每个路径的测量信息。也就是说通过path.computeMetrics()你可以获取一组路径的测量信息。主义。如下path.addOval之后，PathMetrics对象中元素变为两个。

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对象可以获得路径长度length、路径索引contourIndex以及isClosed路径是否闭合。

PathMetrics pms=path.computeMetrics();
Tangent t;
pms.forEach((pm){
	print("---length;-${pm.contourIndex};-${pm.contourIndex}----isClosed:-${pm.isClosed}----")
})

2. 路径测量获取路径某个位置的信息

比如我想要在路径一半的地方绘制一个小球，如果通过自己计算的话。非常的困难
幸运的是我是通过路径进行计算的，实现起来就非常的方便。甚至还能得到改点的角度、速度信息。
下面通过pm.length*0.5表示在路径长度为50%时候的点的信息。

在这里插入图片描述

void drawPmsCenterPoints(Canvas canvas){
    Paint paint=new Paint();
    Path path=new Path();
    paint
      ..style=PaintingStyle.stroke
      ..color=Colors.purple;
    path
      ..relativeMoveTo(0, 0)
      ..relativeLineTo(-40, -40)
      ..relativeLineTo(0, -30)
      ..relativeLineTo(40,-40)
      ..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);
      if(tangent==null)return;
      canvas.drawCircle(tangent.position, 5, Paint()..color=Colors.deepOrange);
    });
    canvas.drawPath(path, paint);
  }

3.路径测量和动画相结合

下面将小球沿着路径进行动画，使用动画控制器让数字在3秒内从0到达1.达到动画效果。

在这里插入图片描述

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'coordinate.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{

  late AnimationController _ctrl;
  @override
  void initState() {

    super.initState();
    // 确定初始化
    WidgetsFlutterBinding.ensureInitialized();
    //横屏
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
    //全屏显示
    SystemChrome.setEnabledSystemUIOverlays([]);

    _ctrl=AnimationController(duration: Duration(seconds: 3),vsync: this)
      ..forward();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Container(
          width: double.maxFinite,
          height: double.maxFinite,
          child: CustomPaint(
            painter: PaperPainter(progress: _ctrl),
          ),
        ));
  }
}

class PaperPainter extends CustomPainter {
  final Coordinate coordinate = Coordinate();
  final Animation<double> progress;

  PaperPainter({required this.progress}):super(repaint: progress);

  @override
  void paint(Canvas canvas, Size size) {
    coordinate.paint(canvas, size);
    canvas.translate(size.width / 2, size.height / 2);
    // drawContainsAndGetBounds(canvas);
    // drawPathShift(canvas);
    // drawPathTransForm(canvas);
    // drawPathCombine(canvas);
    // drawPmsCenterPoints(canvas);
    drawAnimationRectangle(canvas);
  }

  void drawContainsAndGetBounds(Canvas canvas) {
    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);
  }

  void drawPathShift(Canvas canvas){
    Path path=Path();
    Paint 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);
  }

  void drawPathTransForm(Canvas canvas){
    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);
    for(int i=0;i<8;i++){
      canvas.drawPath(path.transform(Matrix4.rotationZ(i*pi/4).storage), paint);
    }
  }

  void drawPathCombine(Canvas canvas){
    Paint paint=Paint();
    Path path=Path();
    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);
    canvas.drawPath(Path.combine(PathOperation.reverseDifference, path, pathOval),paint);

    canvas.translate(-120,0);
    canvas.drawPath(Path.combine(PathOperation.xor, path, pathOval),paint);
  }

  void drawPmsCenterPoints(Canvas canvas){
    Paint paint=new Paint();
    Path path=new Path();
    paint
      ..style=PaintingStyle.stroke
      ..color=Colors.purple;
    path
      ..relativeMoveTo(0, 0)
      ..relativeLineTo(-40, -40)
      ..relativeLineTo(0, -30)
      ..relativeLineTo(40,-40)
      ..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);
      if(tangent==null)return;
      canvas.drawCircle(tangent.position, 5, Paint()..color=Colors.deepOrange);
    });
    canvas.drawPath(path, paint);
  }


  void drawAnimationRectangle(Canvas canvas){
    Paint paint=Paint()
        ..color=Colors.purple
        ..strokeWidth=1
        ..style=PaintingStyle.stroke;
    Path path=Path()
      ..relativeMoveTo(0, 0)
      ..relativeLineTo(-30, 120)
      ..relativeLineTo(30, -30)
      ..relativeLineTo(30, 30)
      ..close();
    PathMetrics pms=path.computeMetrics();
    pms.forEach((element) {
      Tangent? tangent=element.getTangentForOffset(element.length*progress.value);
      if(tangent==null)return ;
      canvas.drawCircle(tangent.position, 5, Paint()..color=Colors.deepOrange);
    });
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
均摘星
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 中 path_provider的具体应用示例
m0_37618883的博客
05-07 711
如果你的应用需要处理大量数据、复杂数据结构或文件类型，那么就用path_provider来访问文件系统进行存储。
flutter开发实战-Canvas绘图之Path路径动画
一名开发者
07-17 1125
flutter提供一块2D画布Canvas，Canvas内部封装了一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。canvas上绘图，有多种不同的方式，常用的就是使用 Path。这里是flutter实现Path路径动画。
Flutter 文件读写---path_provider
Dream It Possible
11-21 4443
在我们实际的应用开发过程中，常常会做一些本地持久化数据配置，在应用启动时可以拿到配置去处理对应的业务逻辑。或者我们下载文件、下载图片等都需要通过IO流来实现。在我们操作文件的时候我们需要结合dart:io库中的，因为每个系统下文件路径不同，如果自己去实现会很麻烦，那么就此产生。是一个Flutter插件，主要作用是提供一种以平台无关一致的方式访问设备的文件系统，比如应用临时目录、文档目录等。而且支持Android、iOS、Linux、MacOS、Windows。
Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle
我很好
08-30 5842
drawRect(rect, paint) rect 矩形 paint 画笔 PaintingStyle.fill（用画笔填充绘制） Rect.fromCircle({ Offset center, double radius }) : this.fromCenter( center: center, width: radius * 2, height: radius * 2, ); ...
Android关于Path你所知道的和不知道的一切
我的专栏
04-25 682
Android关于Path你所知道的和不知道的一切 转载于https://juejin.cn/post/6844903705939050503?share_token=3ab92da7-c7fa-4a0a-af6d-147018341fd6&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_android&utm_campaign=client_share 零、前言 1.canvas本身提供了很多绘制基本图形的
Flutter绘制指南05-图形的路径添加
title_martin的博客
06-17 625
flutter 绘制芝兰
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
Flutter编程指南-多线程
02-21
Flutter是Google开发的新一代跨平台方案，Flutter可以实现写一份代码同时运行在iOS和Android设备上，并且提供很好的性能体验。 在Google刚推出Flutter时，其发展很缓慢，终于在18年发布第一个Bate版之后迎来了爆发...
flutter中使用基于flutter-sound的flutter-sound-record录音
最新发布
01-20
本篇将详细讲解如何在Flutter中使用基于`flutter-sound`的`flutter-sound-record`库进行录音操作。 `flutter-sound`是一个强大的库，它为Flutter提供了音频播放、录制以及处理的功能。`flutter-sound-record`则是`...
ewgcat#Android-interview#Flutter-自定义绘制-View1
07-25
阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击：
Flutter-win64-3.13.4
09-15
【标题】"Flutter-win64-3.13.4" 指的是 Flutter SDK 的一个特定版本，针对 Windows 64 位平台的。这个版本号“3.13.4”意味着它是 Flutter 的一个稳定发行版，可能包含了性能优化、错误修复以及新功能的添加。 ...
Flutter框架分析（七）-- 绘制
weixin_34253126的博客
05-30 1261
Flutter框架分析分析系列文章： 《Flutter框架分析（一）-- 总览和Window》 《Flutter框架分析（二）-- 初始化》 《Flutter框架分析（三）-- Widget，Element和RenderObject》 《Flutter框架分析（四）-- Flutter框架的运行》 《Flutter框架分析（五）-- 动画》 《Flutter框架分析（六）-- 布局》 《Flutt...
Flutter 文件读写-path_provider
xiangxiongfly
06-28 2287
- Android和iOS的文件路径是不同的，因此获取不同平台的文件路径需要原生开发的支持。我们可以借助第三方插件完成这部分工作——PathProvider。 - `path_provider`是一个`Flutter`插件，主要作用是提供一种以平台无关一致的方式访问设备的文件系统，比如应用临时目录、文档目录等。而且`path_provider`支持**Android**、**iOS**、**Linux**、**MacOS**、**Windows**。...
Flutter之CustomPaint 绘制贝塞尔曲线图表(三)
ljq5945的博客
11-24 614
简介 继上两篇所说，在功能实现后，补全这个虽然残缺但是比较有学习价值的DEMO： Flutter - 仿Airbnb的价格区间筛选器。（一） Flutter - 仿Airbnb的价格区间筛选器。（二） Flutter-CustomPaint 绘制贝塞尔曲线图表(三) 页面布局 如之前一样，我习惯把介绍写到注释里，这样方便联系代码，不会导致阅读混乱。 主要是两部分： 1, CustomPaint()，通过个我们可以绘制图表，他有三个参数要注意， 分别是：painter , child ,foregr
Flutter中centerSlice的一些应用
HuberCui的博客
07-05 9486
centerSlice的作用是把普通的图片设置成类似于安卓中的.9图，用于图片拉伸，比如聊天的气泡。 至于什么是.9图，自行百度 这里只讲一下我个人的一些使用，先上用到的图片 这里方块是气泡主体，三角是左上角的拼接，这里方块是48x48 先上代码跟效果图 //气泡 _bubbleBody() { return Container( align...
Path.Combine(string path1, string path2 )的用法
热门推荐
万里归来少年心
03-20 2万+
将两个路径合成一个路径，自动处理路径分隔符的问题。函数声明如下： public static string Combine ( string path1, string path2 ) 常规使用方法。 string path = Path.Combine("D:\\work", "April.txt"); //"D:\work\April.txt" 如果其...
关于程序路径Path.Combine以及AppDomain.CurrentDomain.BaseDirectory
weixin_33768481的博客
04-19 777
关于程序路径 LucenePath:@(System.Configuration.ConfigurationManager.AppSettings["LucenePath"])<br /> Path.Combine(相对目录)@(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "lucene_index"))<...
Flutter自定义绘制（1）- 绘制基础
weixin_33705053的博客
02-18 518
CustomPainterFlutter 中实现绘制的主要是CustomPainter类、我们一般继承这个类,来使用它；class MyPainter extends CustomPainter{ @override void paint(Canvas canvas, Size size) { } @override bool shouldRepaint(CustomPain...
Flutter三天学会之后模仿美团界面
Stay hungry, stay foolish!!
07-10 1万+
一，上图吧 二，平静的时候适合写代码，烦躁了，打篮球，转圈圈合适，这几天下班有时间，写了美团最炫酷的三个界面。Flutter就是这么强大，但是写了三天的代码，发现再好的封装，都觉得这些代码只有自己好找，换做别人都得点进去一个个的找小部件。哈哈，不说了，今天介绍第三个我的个人界面。如下图，实现弯曲的贝塞尔曲线，如何写出这样美丽的线性渐变格调，诗一样的布局，和人你是最喜欢的。图： ...
flutter中的file-saver插件
05-26
file-saver是一个Flutter插件，它允许你在Flutter应用程序中保存文件到本地设备。它提供了一些方法来创建、写入和保存文件。使用这个插件，你可以将文本、图像、音频和视频等不同类型的文件保存到本地文件系统。 要使用file-saver插件，首先需要在你的Flutter应用程序中添加它到你的pubspec.yaml文件。然后，在你的Dart代码中导入包并使用它提供的方法来创建、写入和保存文件。 以下是一个简单的例子，演示如何使用file-saver插件将文本保存为文件： ```dart import 'package:file_saver/file_saver.dart'; import 'dart:io'; void saveTextToFile(String text) async { final fileName = 'my_text_file.txt'; final directory = await getApplicationDocumentsDirectory(); final filePath = '${directory.path}/$fileName'; final file = File(filePath); await file.writeAsString(text); await FileSaver.saveFile(filePath, fileName); } ``` 在上面的例子中，我们使用了Dart的File类来创建一个文件，并使用FileSaver的saveFile方法将文件保存到本地设备。我们还使用了path_provider库来获取应用程序文档目录的路径。 总之，file-saver插件是一个非常实用的Flutter插件，它允许你轻松地将各种类型的文件保存到本地设备。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值