搜索插件、代码仓与 APP 分类

text_to_path_maker 封面
插件详情v0.6.0

text_to_path_maker

一个 Flutter 包,可将任何字体的字符转换为路径并进行动画处理。

AndroidiOSmacOSWindowsLinux
近 30 天下载
596
喜欢数
45
Pub 分数
150

安装插件

flutter pub add text_to_path_maker

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,可将任何字体的文本字符转换为矢量路径,从而实现对其形状和动画的精确控制。它允许开发者通过操纵单个路径段来创建自定义的动画文本效果。非常适合用于跨多个平台的应用程序中的创意 UI、动态排版和视觉叙事。该包利用 Flutter 的渲染功能,提供流畅的动画和高质量的输出。

适合场景

  • 动画文本效果
  • 自定义排版设计
  • 交互式 UI 元素
  • 应用中的视觉叙事
  • 动态徽标动画

主要特点

  • 将字体字符转换为路径
  • 支持自定义字体加载
  • 启用基于路径的动画
  • 跨平台兼容性
  • 高分辨率输出

适合对象

  • 寻求高级文本控制的设计人员
  • 开发动画界面的开发者
  • 需要独特排版视觉效果的应用程序
  • 创意多媒体应用
  • 具有艺术化UI需求的Flutter项目

使用建议

  • 复杂文本的内存使用量更高
  • 需要仔细的性能优化
  • 对非拉丁字母文字的支持有限
  • 动画复杂度可能会影响帧率
  • 必须检查字体许可以确认是否允许嵌入

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Text to Path Maker

This is a pure Flutter and Dart package that allows you to convert text--both characters and icons--into paths. It can generate SVG path strings and Flutter Path objects too.

Additionally, this package offers a bunch of methods you can use to animate those paths.

At the core of this package is a .ttf file parser, written in pure Dart. You can, if you want to, use it to read the font tables present in your TrueType font file.

Getting started

You must always start by calling the parseTTFAsset() method available in the PMFontReader class to parse your font asset. Currently, only .ttf files are supported.

Once the font has been parsed, you'll have access to a PMFont object. You can call its generatePathForCharacter() method to convert any character into a Path object. Note that this method expects you to pass the character code of the character.

Next, you'll want to use the PMTransform.moveAndScale() method to position and scale the path. This is usually necessary because, by default, the paths can be quite large.

At this point, you can render the Path object onto any Canvas object. If you want to animate the path, however, you must call the PMPieces.breakIntoPieces() method. This method splits the path into tiny paths, depending on the precision you specify. These tiny paths, when rendered sequentially, will create the illusion of the character being drawn.

There's also a utility PMPainter class, which extends the CustomPainter class. You can use this to quickly render your animation using a CustomPaint widget.

Refer to the example code to learn more.

Notes

This package is still a work in progress. It works reasonably well with most fonts, but there's no guarantee that it will handle every single font you have. It has been tested with Roboto, FontAwesome, and Material Icons. If you find a bug, you can raise an issue on this project's GitHub repository.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。