@ everyreality/ pretext
像素精确字体测量库 乃至真实 G2 智能眼镜(EvenHub specially). 预测精确的文本布局尺寸与眼镜固件中使用的LVGL渲染引擎相匹配,因此可以精确地大小UI容器而无需猜测. 灵感来自 借口。 。 。 .
说明: 在多数情况下,测量方法都经过人工比较和对照实际的眼镜渲染进行核实,但在预测与固件输出不同的情况下,边缘情况可能存在. 特别是,对于固件字体中不存在的字符,结果可能取消,因为固件和这个库在某些情况下可能会不同处理缺失的格来克.
特征
- 文字测量 ——多行布局预测并用词包
- 克宁语 ——使用固件精确公式的每个字符配对调整
- 宽字符支持 ——拉丁语,西里尔语,希腊语,CJK (中文,日语,朝鲜语),Bopomofo
安装
npm install @evenrealities/pretext
API 密码
getTextWidth(text: string): number
返回字符串的单行像素宽度,并应用克宁.
import { getTextWidth } from '@evenrealities/pretext';
const width = getTextWidth('Hello, world!');
// => 79 (pixels)
measureTextWrap(text: string, maxWidth: number): MeasureTextResult
测量给定像素宽度范围内多行文字布局. 处理空格和连字符的字包, CJK 边界断开, 清晰的新线, 以及不存在断开机会时的硬断开.
maxWidth 应该是 内部内容宽度 ——如果你的容器有垫子或边框,在呼叫前减去. 回来的 height 是纯文本高; 添加自己的粘贴/边框以获得最后容器大小.
import { measureTextWrap } from '@evenrealities/pretext';
const result = measureTextWrap('The quick brown fox jumps over the lazy dog', 200);
// => {
// lineCount: 2,
// height: 54, // lineCount * 27 (line height)
// lineWidths: [192, 96]
// }
// With padding + border:
const pad = 8, border = 2;
const inner = 300 - 2 * (pad + border); // 280px available for text
const m = measureTextWrap('Hello world', inner);
const containerHeight = m.height + 2 * (pad + border);
参数:
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
text | string | —— 说 | 要测量的字符串 |
maxWidth | number | —— 说 | 文本以像素为单位的现有宽度( subtract dadding/ border first) |
返回类型 :
| 外地 | 类型 | 说明 |
|---|---|---|
lineCount | number | 包装后行数 |
height | number | 文字高度( 以像素计 )lineCount * 27(中文(简体) ) |
lineWidths | number[] | 每行像素宽度 |
pxTruncate(text: string, maxPx: number): string
将字符串切入像素预算, 附加 '...' 如果需要的话。 返回已匹配的原始字符串。 使用二进制搜索来高效地安装,并且是代码-意识(不会像emoji那样打破代对).
import { pxTruncate } from '@evenrealities/pretext';
const truncated = pxTruncate('Hello, world!', 50);
// => 'Hell...'
getAdvW(cp: number): number
返回 1/16px 单位中一个代码点的原始提前宽度(无克宁,无四舍五入)。 遵循字体倒转链: eurroster - > eurroster crylgrek - > cn. 主要用于调试或构建自定义测量逻辑.
显示引用
G2眼镜有一个 576 x 288 像素 lVGL 提供的显示,固定行高为 27px (英语)。 。 。 .
如何运作
库内嵌从G2固件中使用的LVGL C字体文件中提取出字体度量衡. 它复制了固件的文本塑造管道:
- 格莱弗搜索 ——通过三相倒转链(拉丁语->西里尔语/希腊语->CJK)解决每个代码点
- 克宁语 使用固件公式应用配对调整:
(kern_value * kern_scale) >> 4 - 每格氏圆形 ——每个前置宽度被四舍五入到像素上(
(adv + kern + 8) >> 4),与LVGL的行为完全匹配 - 换行 空格、连字符和CJK边界断开,硬断开作为倒入
注:如果固件字体的度量衡发生变化,则必须更新此库以匹配.
更改日志
0.1.4 (中文(简体) )
- 添加 Emoji 字体
1.1.3 国家
- 断开 : 删除
containerPadding参数来自measureTextWrap函数现在测量纯正文本——调用者应从中减去平板字/边框maxWidth在回电前再加回去height。这避免了内部处理地标但边界宽度不连贯的情况. - 断开 : 删除
measureList。它的逻辑是微不足道的(项目计分×40px,加上基本宽度比较),呼叫者可以与getTextWidth。 。 。 .
0.1.2 (中文(简体) )
- 首次公开发布
getTextWidth, (中文(简体) ),measureTextWrap, (中文(简体) ),pxTruncate, (中文(简体) ),measureList,以及getAdvW。 。 。 .