鸿蒙中 文本测量
一、文本测量
文本测量指的是在图形绘制中,对文本的尺寸和布局进行评估,计算文本在给定字体和样式下占用的空间(例如宽度、高度和其他相关信息)的过程。
| 测量项 | 说明 |
|---|---|
| 文本宽度 | 测量给定文本在特定字体、大小和样式下的水平长度 |
| 文本高度 | 测量给定文本的垂直高度,涉及文本的上升线、下降线等 |
| 行间距 | 测量多行文本之间的垂直距离 |
| 字符间距 | 测量单个字符之间的水平距离 |
文本测量用于文本排版、布局、渲染以及调整文本显示的位置和大小等场景,便于更精准地控制与调整界面的布局和呈现,以达到设计预期。
二、核心接口
| 接口 | 描述 |
|---|---|
getLongestLine(): number | 获取当前段落最长行的宽度,建议使用时将返回值向上取整 |
getLongestLineWithIndent(): number | 获取当前段落最长行的宽度(包含当前行缩进的宽度),建议使用时将返回值向上取整 |
getTextLines(): Array<TextLine> | 获取当前段落文本行对象数组 |
getLineMetrics(): Array<LineMetrics> | 获取段落所有行的度量信息(高度、宽度、起始坐标等) |
getLineMetrics(lineNumber): LineMetrics | undefined | 获取段落指定行的度量信息,超出范围返回undefined |
三、开发步骤
3.1 导入依赖模块
import { text } from '@kit.ArkGraphics2D';3.2 创建段落样式和段落生成器
// 设置文本样式 let myTextStyle: text.TextStyle = { color: { alpha: 255, red: 255, green: 0, blue: 0 }, fontSize: 100 }; // 创建一个段落样式对象,以设置排版风格 let myParagraphStyle: text.ParagraphStyle = { textStyle: myTextStyle, wordBreak: text.WordBreak.NORMAL }; // 创建一个段落生成器 let paragraphBuilder = new text.ParagraphBuilder(myParagraphStyle, new text.FontCollection());3.3 添加文本并生成段落
// 在段落生成器中设置文本样式 paragraphBuilder.pushStyle(myTextStyle); // 在段落生成器中设置文本内容 paragraphBuilder.addText("文本测量测试"); // 通过段落生成器生成段落 let paragraph = paragraphBuilder.build();3.4 排版并获取测量信息
// 对段落进行塑形排版,设置排版宽度为1000 paragraph.layoutSync(1000); // 1. 获取排版后最长行行宽 let longestLineWidth = paragraph.getLongestLine(); console.info("longestLineWidth = " + longestLineWidth); // 2. 获取排版后最长行行宽(包含缩进) let longestLineWithIndentWidth = paragraph.getLongestLineWithIndent(); console.info("longestLineWithIndentWidth = " + longestLineWithIndentWidth); // 3. 获取排版后所有行对象 let textLines = paragraph.getTextLines(); for (let index = 0; index < textLines.length; index++) { const textline = textLines[index]; let curLineRange = textline.getTextRange(); let curLineGlyCnt = textline.getGlyphCount(); console.info("MetricsMSG: 第" + (index + 1) + "行 TextRange start: " + curLineRange.start + " end: " + curLineRange.end); console.info("MetricsMSG: 第" + (index + 1) + "行字形数量为: " + curLineGlyCnt); } // 4. 获取排版后指定行对应的度量信息 let lineCnt = paragraph.getLineCount(); for (let index = 0; index < lineCnt; index++) { let lineMetrics = paragraph.getLineMetrics(index); if (lineMetrics) { console.info("MetricsMSG: 第" + (index + 1) + "行 width: " + lineMetrics.width); console.info("MetricsMSG: 第" + (index + 1) + "行 start index: " + lineMetrics.startIndex + ", end index: " + lineMetrics.endIndex); } } // 5. 获取排版后所有行度量信息数组 let allLineMetrics = paragraph.getLineMetrics(); console.info("MetricsMSG: 第1行 lineMetrics width: " + allLineMetrics[0].width);五、接口使用场景
| 接口 | 使用场景 |
|---|---|
getLongestLine() | 确定段落最大宽度,用于容器适配 |
getLongestLineWithIndent() | 考虑缩进的宽度计算 |
getTextLines() | 获取每行的文本范围和字形数量 |
getLineMetrics() | 获取所有行的详细度量信息 |
getLineMetrics(lineNumber) | 获取指定行的详细度量信息 |
六、注意事项
6.1 排版宽度设置
// 必须先调用layoutSync设置排版宽度,再进行测量 paragraph.layoutSync(1000); // 设置排版宽度为1000px6.2 行号有效性
getLineMetrics(lineNumber)中,lineNumber从0开始计数,超出当前段落排版后最大行数后返回undefined。
