Flutter SVG图像处理插件jovial_svg的使用

描述

jovial_svg 是一个强大的、高效的SVG静态图像渲染库，支持定义良好的SVG配置文件、高效的二进制存储格式和动画。通过使用二进制格式，加载预编译的二进制文件通常比解析XML SVG文件快一个数量级。对于较大的SVG文件，观察到的加载速度提高了5倍至20倍。

该库支持适用于静态图像的 SVG Tiny 1.2 和 SVG 1.1 的一部分。它还支持通过 <style> 标签内联CSS样式表。除了SVG，Android Vector Drawable 文件也被支持。提供的小部件用于显示这些可缩放的图像，并且可以通过DOM接口修改SVG资源以生成动画。

该库发布在 pub.dev，您也可以在那里找到 dartdocs。它被用于 JRPN 中的木星图标和 Jovial Aisleriot 中的卡片。

快速上手

显示SVG

一个简单的例子是将SVG解析为 ScalableImage 并在 ScalableImageWidget 中显示：

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

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

///
/// 一个最小示例应用程序，使用 `jovial_svg`。这个例子让
/// [ScalableImageWidget] 处理所有异步工作，这在原型设计时是合理的。
///
class MinimalSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'SVG 最小示例',
        home: ScalableImageWidget.fromSISource(
            si: ScalableImageSource.fromSvgHttpUrl(
                Uri.parse('https://jovial.com/images/jupiter.svg'))));
  }
}

通常情况下，资源来自 AssetBundle，但它们仍然需要异步加载。可以在构建UI之前预先加载它们，这是一个更好的选择——它可以节省重新渲染UI的时间，避免任何可能的闪烁。以下是如何在网络中预先加载的例子：

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

void main() async {
  final si = await ScalableImage.fromSvgHttpUrl(
      Uri.parse('https://jovial.com/images/jupiter.svg'));
  runApp(AssetsPreLoaded(si));
}

///
/// 使用 `jovial_svg` 的示例应用程序。这个例子展示了如何在构建widget树之前完成异步部分，
/// 以避免屏幕上的变化。
///
class AssetsPreLoaded extends StatelessWidget {
  final ScalableImage icon;

  AssetsPreLoaded(this.icon);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'SVG 最小示例', home: ScalableImageWidget(si: icon));
  }
}

示例程序

要尝试该库，请参阅 示例程序。它主要用于桌面运行，但在其他平台上也能很好地运行。它允许你浏览一系列测试图像，包括从开源纸牌游戏（如Aisleriot）中获取的图像。该演示还允许你粘贴SVG资产的URL到程序中；然后它会加载并渲染它。

动画与交互性

通过让程序检测渲染的SVG资产中的鼠标点击，可以实现交互性。命名的SVG节点可以标记为导出，导出节点的名称和边界矩形提供给调用者。边界矩形可以与鼠标点击或触摸事件的位置进行比较，以确定给定点渲染了哪个节点。

提供的文档对象模型（DOM）API可用于编程方式修改SVG资产。使用它，Dart代码可以更改诸如颜色、线宽、字体等渲染属性。它还可以添加或删除表示资产的内存图中的节点。这些修改可以重复进行以实现动画效果。

有关动画和交互性的更多信息，请参阅 examples 目录下的 animation.dart。

支持的SVG配置文件

大多数适用于静态SVG文档的SVG 1.1功能都得到支持，包括使用CSS（<style> 标签）指定SVG属性。具体支持的功能请参考原文档。

相关工作

关于Flutter和矢量图形的讨论，可以访问 https://flutter.dev/go/vector-graphics。它包括了一张针对不同用例的SVG替代品列表。特别是如果你正在创建自己的资产，其中的一个替代品可能值得考虑。