Show HN: uWrap.js – 一个小于 2KB，更快更准确的文本换行工具
leeoniya/uWrap
一个小于 2KB (min)，速度快 10 倍且更准确的文本换行工具。
License
**uWrap ** Public
⏎ μWrap
一个速度快 10 倍 且更准确的文本换行工具，体积小于 < 2KB (min) (MIT Licensed)
Introduction
uWrap 的存在是为了有效地预测列表和网格 virtualization 的不同行高，这是一种在渲染大型可滚动数据集时优化 UI 性能的技术。 事实证明，既快速又准确地执行此操作并非易事，因为 Canvas2D 没有提供文本换行的 API，并且 measureText() 的开销很大； 由于性能不佳，通过 DOM 进行测量也不是一个好的选择。 此外，字体大小、可变宽度字体、letter-spacing、显式换行符和不同的 white-space 选项都会影响换行的行数。
注意:
- 目前，在拉丁字符集下工作最为准确。
- 尚未处理 Windows 样式的
\r\n显式换行符。 - 目前只实现了
pre-line换行策略。
Performance
uWrap 在 CPU 和内存使用方面都明显优于 canvas-hypertxt，同时在准确性方面也 更胜一筹。
下面的基准测试在宽度介于 50px 和 250px 之间的随机框中换行 100,000 个随机句子。 您可以在 demo page 的 DevTools 控制台中实时查看此内容。
Chrome 135 | Firefox 137 | Safari 18.1 ---|---|--- uWrap | 82ms | 90ms | 185ms canvas-hypertxt | 770ms | 1660ms | 1430ms
Installation
npm i uwrap
或
<script src="./dist/uWrap.iife.min.js"></script>
API
一个 10 行代码的 uWrap.d.ts TypeScript 定义文件。
Usage
// 导入使用 pre-line 策略包装可变宽度字体的 util
import { varPreLine } from 'uwrap';
// 创建一个具有所需字体设置的 Canvas2D 上下文
let ctx = document.createElement('canvas').getContext('2d');
ctx.font = "14px Inter, sans-serif";
ctx.letterSpacing = '0.15px';
// 初始化 util 函数
const { count, test, split } = varPreLine(ctx);
// 示例文本
let text = 'The quick brown fox jumps over the lazy dog.';
// 计算行数
let numLines = count(text, width);
// 测试文本是否会换行
let willWrap = test(text, width);
// 分割行（带有可选的限制）
let lines = split(text, width, 3);
About
一个小于 2KB (min)，速度快 10 倍且更准确的文本换行工具。
Topics
canvas canvas2d word-wrap text-wrap text-wrapping line-counting line-count word-wrapping