SuperAPI AI 工具集

pretext

通用与其它

查看项目

更新于 10-15 17:20

技能介绍

用途:@chenglou/pretext 是 Cheng Lou 开发的约 15KB、零依赖 TypeScript 库,用于无 DOM 的多行文本测量与排版。给定(文本、字体、宽度),通过 canvas 测量返回换行位置、逐行宽度、逐字素位置和总高度,无需触发布局重排。它本身只返回数字,实际绘制由开发者完成,因此可作为创意基元,在 60fps 下实现文字绕移动物体回流、以文字为几何的游戏、ASCII 效果、逐字素粒子破碎和自适应文本容器等演示。

主要能力:核心 API 包括 prepare/layout(单纯测量高度)、prepareWithSegments/layoutWithLines(固定宽度分行)、layoutNextLineRange/materializeLineRange(流式或可变宽度逐行排版,实现文字绕形状流动的关键模式)、measureLineStats(多行紧包宽度)、walkLineRanges(不分配字符串地遍历行)。逐字素切分建议使用内置 Intl.Segmenter。另有 @chenglou/pretext/rich-inline 子路径,支持混排字体、标签和提及。

用法:单个自包含 HTML 文件,无构建步骤。通过 esm.sh 引入并锁定版本,例如从 "https://esm.sh/@chenglou/pretext@0.0.6" 导入。绘制使用 HTML5 Canvas 2D 或任意坐标系统,交互用原生 DOM 事件。本地验证可运行 cd <目录> && python3 -m http.server 8765 后打开 http://localhost:8765/<file>.html。

限制与注意:prepare 是昂贵调用,应按文本与字体缓存,不要在动画循环中重复调用;canvas 字体字符串必须与 CSS 完全一致,否则测量会漂移;文本不参与绘制时用 CSS 即可,本库刻意保持窄范围,不适合富文本编辑器。字体、配色、构图等创意细节需自行设计。