一、插件介绍

path_drawing是一个功能强大的Flutter路径绘制库，它提供了丰富的路径操作功能，包括路径裁剪（Path Trim）、路径虚线（Path Dash）和路径解析（Path Parse）等。该库可以帮助开发者轻松实现复杂的图形绘制效果，如进度条动画、自定义图标、数据可视化等。

在OpenHarmony平台上，path_drawing库已经过适配，可以无缝集成到Flutter应用中，为开发者提供一致的开发体验。

主要功能特点：

  • 路径裁剪（Path Trim）：可以按照指定百分比和起始位置裁剪路径，常用于进度条、加载动画等场景
  • 路径虚线（Path Dash）：可以将路径转换为虚线样式，支持自定义虚线间隔
  • 路径解析（Path Parse）：支持解析SVG路径字符串，方便从设计工具中导入路径数据

二、环境要求

  • Flutter SDK: 2.19.6+
  • Dart SDK: 2.19.6+
  • OpenHarmony API: 9+
  • DevEco Studio: 3.1+

三、包的引入

由于path_drawing是自定义修改版本，需要以git形式引入。在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter

  path_drawing:
    git:
      url: "https://atomgit.com/flutter-openharmony/path_drawing.git"
      path: "path_drawing"
  path: ^1.8.2

添加依赖后，执行以下命令获取包：

flutter pub get

四、API调用示例

4.1 Path Trim（路径裁剪）

Path Trim功能可以按照指定的百分比和起始位置裁剪路径，常用于实现进度条、加载动画等效果。

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

class TrimPathExample extends StatefulWidget {
  const TrimPathExample({Key? key}) : super(key: key);

  @override
  State<TrimPathExample> createState() => _TrimPathExampleState();
}

class _TrimPathExampleState extends State<TrimPathExample> {
  double _trimPercent = 0.2;
  PathTrimOrigin _trimOrigin = PathTrimOrigin.begin;

  void setTrimPercent(double value) {
    setState(() {
      _trimPercent = value;
    });
  }

  void toggleTrimOrigin() {
    setState(() {
      _trimOrigin = _trimOrigin == PathTrimOrigin.begin
          ? PathTrimOrigin.end
          : PathTrimOrigin.begin;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Path Trim Example')),
      body: Stack(
        children: <Widget>[
          CustomPaint(
              painter: TrimPathPainter(_trimPercent, _trimOrigin)),
          Align(
            alignment: Alignment.bottomCenter,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Slider(
                  value: _trimPercent,
                  onChanged: (double value) => setTrimPercent(value),
                ),
                RadioListTile<PathTrimOrigin>(
                  title: const Text('从起点裁剪'),
                  value: PathTrimOrigin.begin,
                  groupValue: _trimOrigin,
                  onChanged: (value) => toggleTrimOrigin(),
                ),
                RadioListTile<PathTrimOrigin>(
                  title: const Text('从终点裁剪'),
                  value: PathTrimOrigin.end,
                  groupValue: _trimOrigin,
                  onChanged: (value) => toggleTrimOrigin(),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class TrimPathPainter extends CustomPainter {
  TrimPathPainter(this.percent, this.origin);

  final double percent;
  final PathTrimOrigin origin;

  final Path p = Path()
    ..moveTo(50.0, 100.0)
    ..lineTo(250.0, 100.0)
    ..quadraticBezierTo(275.0, 50.0, 350.0, 100.0)
    ..lineTo(450.0, 100.0);

  @override
  bool shouldRepaint(TrimPathPainter oldDelegate) =>
      oldDelegate.percent != percent;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 8.0
      ..style = PaintingStyle.stroke;

    canvas.drawPath(trimPath(p, percent, origin: origin), paint);
  }
}

4.2 Path Dash（路径虚线）

Path Dash功能可以将路径转换为虚线样式，支持自定义虚线间隔，常用于绘制网格、边框等效果。

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Path Dash Example')),
      body: CustomPaint(painter: DashPathPainter()),
    );
  }
}

class DashPathPainter extends CustomPainter {
  final Path p = Path()
    ..moveTo(50.0, 100.0)
    ..lineTo(250.0, 100.0)
    ..quadraticBezierTo(275.0, 50.0, 350.0, 100.0)
    ..lineTo(450.0, 100.0)
    ..addRect(const Rect.fromLTWH(50.0, 200.0, 400.0, 200.0));

  @override
  bool shouldRepaint(DashPathPainter oldDelegate) => true;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    canvas.drawPath(
        dashPath(
          p,
          dashArray: CircularIntervalList<double>(
            <double>[10.0, 5.0], // 虚线长度10，间隔5
          ),
        ),
        paint);
  }
}

4.3 Path Parse（路径解析）

Path Parse功能可以解析SVG路径字符串，方便从设计工具中导入路径数据，常用于绘制自定义图标、复杂图形等。

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

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

  @override
  Widget build(BuildContext context) {
    // 从SVG设计工具导出的路径字符串
    const svgPath = 'M100,200 L300,200 Q350,100 400,200 L500,200';

    return Scaffold(
      appBar: AppBar(title: const Text('Path Parse Example')),
      body: CustomPaint(
        painter: PathParsePainter(svgPath),
      ),
    );
  }
}

class PathParsePainter extends CustomPainter {
  PathParsePainter(String path) : p = parseSvgPathData(path);

  final Path p;

  @override
  bool shouldRepaint(PathParsePainter oldDelegate) => true;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 6.0
      ..style = PaintingStyle.stroke;

    canvas.drawPath(p, paint);
  }
}

五、完整应用示例

以下是一个完整的Flutter应用示例，展示了path_drawing库在OpenHarmony平台上的综合使用：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Path Drawing Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Path Drawing 功能演示'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: const Text('路径裁剪示例'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const TrimPathExample()),
              );
            },
          ),
          ListTile(
            title: const Text('路径虚线示例'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const DashPathExample()),
              );
            },
          ),
          ListTile(
            title: const Text('路径解析示例'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const PathParseExample()),
              );
            },
          ),
        ],
      ),
    );
  }
}

六、总结

path_drawing是一个功能强大的Flutter路径绘制库，它为开发者提供了丰富的路径操作功能，包括路径裁剪、路径虚线和路径解析等。在OpenHarmony平台上，该库已经过适配，可以无缝集成到Flutter应用中。

通过本文的介绍，开发者可以了解到path_drawing库的主要功能、环境要求、引入方式和API使用方法。结合实际应用场景，开发者可以灵活运用这些功能，实现各种复杂的图形绘制效果。

path_drawing库的使用非常灵活，开发者可以根据自己的需求进行扩展和定制，为OpenHarmony平台上的Flutter应用提供更加丰富的视觉效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

Flutter跨平台开发实战: 鸿蒙与离散数学系列：命题逻辑与响应式引擎

avatar HarmonyOS开发者社区
cover

Flutter跨平台开发实战: 鸿蒙与离散数学系列：有限状态机 (FSM) 与交互逻辑

avatar HarmonyOS开发者社区
cover

基础入门 React Native 鸿蒙跨平台开发：TabBar 底部导航栏

avatar HarmonyOS开发者社区