SuperAPI AI 工具集

pretext

通用与其它

查看项目

更新于 10-16 07:23

技能介绍

用途:@chenglou/pretext 通过 canvas 测量实现无 DOM 的多行文本布局,输入(文本、字体、宽度)即可得到换行、每行宽度、逐字素位置和总高度。因快速且几何化,可作创意原语,支撑 60fps 的文本绕流、文字几何游戏、字素粒子碎裂、多行紧包 UI 等演示。

主要能力:提供 prepare/layout(仅测高度与行数)、prepareWithSegments/layoutWithLines(固定宽度分行)、layoutNextLineRange/materializeLineRange(流式或逐行可变宽度,实现文字绕形状)、measureLineStats(最宽行,即多行紧包宽度)、walkLineRanges(不分配字符串遍历行);另有 rich-inline 子路径处理混排字体与芯片。

使用方式:单文件自包含 HTML,无需构建,经 esm.sh 以固定版本引入: import { prepare, layout } from "https://esm.sh/@chenglou/pretext@0.0.6"; prepare/prepareWithSegments 对同一文本与字体只调用一次并缓存句柄,resize 时仅重跑 layout*,不要每帧重新 prepare。用 Intl.Segmenter 做字素切分。本地验证:cd <dir> && python -m http.server 8765。

适用场景:文字绕移动图形重排、以词为砖块的游戏、逐字素物理碎裂、ASCII 障碍排版、多栏编辑排版、动态字体、多行紧包容器。

限制:不适用于 CSS 已能解决的静态页面、富文本编辑器与通用行内格式化、图像转文字,以及纯 canvas 生成艺术;canvas 字体字符串必须与 CSS 完全一致,否则测量漂移;窄走廊应跳过该行而非传极小宽度;富文本芯片需额外宽度。官方 playground 为 chenglou.me/pretext,模板含 hello-orb-flow.html 与 donut-orbit.html。价格、授权细节与最新版本号请以 npm 为准,资料未完整提供。