84
// 项目简介
Pretext 是一个 JavaScript/TypeScript 库，它无需依赖昂贵的 DOM 重排操作，即可提供快速、准确的多行文本测量与布局。通过使用浏览器字体引擎作为基准来实现其自身的测量逻辑，它能够为 Canvas 和 SVG 等各种渲染目标提供高效的文本处理能力。该库既提供了用于简单高度计算的高级 API，也提供了用于手动、复杂文本布局场景的底层工具。
// 技术分析
Pretext 是一个高性能的 JavaScript/TypeScript 库，旨在处理多行文本测量和布局，而无需依赖昂贵的 DOM 重排。通过使用浏览器字体引擎作为基准来实现其自身的测量逻辑，它使开发者能够通过纯算术进行复杂的文本计算，例如虚拟化和自定义布局引擎。这种设计选择优先考虑了速度和准确性，有效地解决了与传统基于浏览器的文本测量相关的性能瓶颈。
// 核心亮点
01
通过纯算术和基于缓存的 canvas 指标进行文本测量，消除了昂贵的 DOM 布局重排。
02
支持文本虚拟化、瀑布流和类似 flexbox 的自定义实现等高级布局场景，无需浏览器端的 hack。
03
提供基于流和迭代器的 API 用于手动行布局，允许复杂的文本环绕动态元素（如浮动图像）。
04
包含一个专门的富文本内联流助手，用于管理边界空白折叠和原子项（如 chips 或 mentions）。
05
提供两阶段架构，将昂贵的一次性文本准备工作与高速的热路径布局计算分离开来。
06
支持在开发阶段准确验证文本溢出和布局行为，促进 AI 友好的迭代周期。
// 典型使用场景
01
在不触发浏览器布局重排的情况下计算段落高度和行数。
02
在 Canvas、SVG 或 WebGL 环境中为自定义渲染执行手动文本布局。
03
实现虚拟化、瀑布流布局以及元素周围动态文本换行等高级 UI 功能。
// 快速开始
要开始使用 Pretext，请通过 npm 使用 'npm install @chenglou/pretext' 安装该包。导入 'prepare' 和 'layout' 函数来分析文本并计算尺寸，或者使用 'prepareWithSegments' 以获得对逐行渲染更细粒度的控制。你可以通过克隆仓库并运行提供的演示脚本来探索该库的功能。