Flutter SVG图片编辑插件 svg_pic_editor 的使用

SvgPicEditor

SvgPicEditor 是一个Flutter小部件，允许你从各种来源（如本地资源、SVG字符串或URL）加载并修改SVG文件。此小部件还允许你使用ElementEdit类修改特定的SVG元素，轻松更改颜色、透明度、变换等属性。新的listenEdit和getColors功能进一步扩展了操作和自定义SVG的可能性。

目录

• 安装
• 用法
  • 导入
  • 基本示例
  • 构造函数
    • SvgPicEditor.asset
    • SvgPicEditor.network
    • SvgPicEditor.string
  • 小部件属性
  • 修改示例
  • 新功能示例
• 结论

安装

要将SvgPicEditor添加到你的Flutter项目中，在pubspec.yaml中包含以下内容：

dependencies:
  svg_pic_editor: ^3.0.0

或者运行命令：

flutter pub add svg_pic_editor

用法

导入

要在Dart文件中使用SvgPicEditor，请导入包：

import 'package:svg_pic_editor/svg_pic_editor.dart';

基本示例

下面是如何在Flutter小部件中使用SvgPicEditor的基本示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SvgPicEditor Example')),
        body: Center(
          child: SvgPicEditor.asset(
            'assets/example.svg',
            modifications: [
              ElementEdit(
                querySelector: '#element1',
                fillColor: Colors.red,
              ),
            ],
            width: 200.0,
            height: 200.0,
            fit: BoxFit.contain,
            listenEdit: (svgContent) {
              print('Edited SVG content: $svgContent');
            },
          ),
        ),
      ),
    );
  }
}

这个例子从本地资产加载了一个SVG文件，并将ID为element1的SVG元素的颜色更改为红色。它还监听SVG内容的变化，并将更新后的内容打印到控制台。

构造函数

SvgPicEditor有三个主要的构造函数用于不同的SVG来源：

SvgPicEditor.asset

从本地资产加载SVG：

SvgPicEditor.asset(
  'assets/your_file.svg',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '#yourID',
  color: Colors.red,
  listenEdit: (svgContent) => print('Updated SVG: $svgContent'),
);

SvgPicEditor.network

从URL加载SVG：

SvgPicEditor.network(
  'https://example.com/your/svg.svg',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '.yourClass',
  color: Colors.red,
  listenEdit: (svgContent) => print('SVG content: $svgContent'),
);

SvgPicEditor.string

从SVG字符串加载SVG：

SvgPicEditor.string(
  '<svg>...</svg>',
  modifications: [/* List of ElementEdit */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '[attribute="value"]',
  color: Colors.red,
  listenEdit: (svgContent) => print('Updated SVG: $svgContent'),
);

小部件属性

SvgPicEditor小部件的主要属性如下：

• assetName (String?)：包含SVG的资产名称。
• svgString (String?)：表示SVG内容的字符串。
• svgUrl (String?)：要加载的SVG的URL。
• listenEdit (Function(String)?)：监听SVG内容变化的回调函数。
• package (String?)：包含资产的包名。
• modifications (List<ElementEdit>?)：要应用到SVG的修改列表。
• width (double?)：小部件的宽度。
• height (double?)：小部件的高度。
• fit (BoxFit)：SVG如何适应可用空间。
• querySelector (String?)：选择特定元素的选择器。
• color (Color?)：应用于SVG的颜色。

修改示例

ElementEdit类允许你对SVG元素进行特定的修改，例如更改颜色、透明度或应用变换。

class ElementEdit {
  final String? id;
  final Color? fillColor;
  final Color? strokeColor;
  final double? strokeWidth;
  final double? opacity;
  final String? transform;
  final String? querySelector;

  ElementEdit({
    this.id,
    this.fillColor,
    this.strokeColor,
    this.strokeWidth,
    this.opacity,
    this.transform,
    this.querySelector,
  });
}

新功能示例

使用listenEdit跟踪更改

listenEdit特性允许你监听对SVG内容所做的编辑，并获取关于已修改SVG的信息。

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementEdit(
      querySelector: '#element1',
      fillColor: Colors.red,
    ),
  ],
  width: 200.0,
  height: 200.0,
  fit: BoxFit.contain,
  listenEdit: (svgContent) {
    // 每当SVG被编辑时，更新后的内容将被打印
    print('Edited SVG content: $svgContent');
  },
);

使用getColors从SVG中检索颜色

getColors特性允许你从SVG中提取颜色信息。它返回一个SvgColorElement，其中包含SVG中的颜色及其相关元素。

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementEdit(
      querySelector: '#element1',
      fillColor: Colors.red,
    ),
  ],
  width: 200.0,
  height: 200.0,
  fit: BoxFit.contain,
  getColor: (List<SvgColorElement> colors) {
    // 获取SVG中的颜色及其相关元素
    colors.forEach((colorElement) {
      print('Color: ${colorElement.color}');
      colorElement.parts.forEach((part) { // 列表中与颜色相关的元素
        print('Element: ${part.querySelector}');
      });
    });
  },
);

上述代码中，getColors分析编辑后的SVG内容，并返回找到的颜色以及SVG中与这些颜色相关的其他元素。这提供了一种有效的方法来捕捉SVG视觉元素的信息。

结论

通过新的listenEdit和getColors特性，SvgPicEditor成为了一个更强大且灵活的工具，用于在Flutter中操作和自定义SVG。现在，除了修改SVG元素外，你还可以实时跟踪编辑，并提取有关SVG中颜色和元素的重要信息。

以上是svg_pic_editor插件的详细使用说明及示例。希望这些信息能帮助你在Flutter项目中更好地利用这个强大的SVG编辑工具。如果你有任何问题或需要更多帮助，请随时提问！