1# 使用Text模块实现文本显示 2 3## 场景介绍 4 5@ohos.graphics.text模块提供了接口创建复杂的文本段落，包括多样的文本样式、段落样式、换行规则等，并最终将这些信息转换为能在屏幕上高效渲染的布局数据。 6 7## 接口说明 8 9@ohos.graphics.text常用接口如下表所示，详细的接口说明请参考[@ohos.graphics.text](../reference/apis-arkgraphics2d/js-apis-graphics-text.md)。 10 11| 接口名 | 描述 | 12| -------- | -------- | 13| pushStyle(textStyle: TextStyle): void | 设置成最新的文本样式。 | 14| addText(text: string): void | 用于向正在构建的文本段落中插入具体的文本字符串。 | 15| addPlaceholder(placeholderSpan: PlaceholderSpan): void | 用于在构建文本段落时插入占位符。 | 16| build(): Paragraph | 用于完成段落的构建过程，生成一个可用于后续排版渲染的段落对象。 | 17| paint(canvas: drawing.Canvas, x: number, y: number): void | 在画布上以坐标点 (x, y) 为左上角位置绘制文本。 | 18 19## 开发步骤 20 21使用TextEngine进行文字绘制与显示时，需要使用@ohos.graphics.text模块的字体管理器和段落样式、段落生成器创建文本段落，最终在应用上显示文本。 22 23本文以实现段落文字的创建与显示为例，给出具体的开发指导。 24### 添加开发依赖 25 26**依赖文件** 27```js 28import { NodeController, FrameNode, RenderNode, DrawContext } from '@kit.ArkUI' 29import { UIContext } from '@kit.ArkUI' 30import { drawing } from '@kit.ArkGraphics2D' 31import { text } from '@kit.ArkGraphics2D' 32import { image } from '@kit.ImageKit' 33import { common2D } from '@kit.ArkGraphics2D' 34``` 35 36接下来介绍如何使用text接口进行文本绘制。 37 38### 绘制文本 39 40以下步骤描述了如何使用@ohos.graphics.text模块的接口创建段落对象以及显示段落文本。 41 421. **创建RenderNode子类**。创建`RenderNode`子类`MyRenderNode`，并在其中定义绘图函数draw，下方第2步及第3步为draw函数的具体实现。`RenderNode`中包含树结构的操作，以及对绘制属性的操作。 43 44 ```js 45 // 创建一个MyRenderNode类，并绘制文本。 46 class MyRenderNode extends RenderNode { 47 48 async draw(context: DrawContext) { 49 // ... 50 } 51 } 52 ``` 53 542. **创建canvas并设置画笔和画刷样式**。使用`Pen`接口创建一个画笔实例pen，并设置抗锯齿、颜色、线宽等属性，画笔用于形状边框线的绘制。使用`Brush`接口创建一个画刷实例brush，并设置填充颜色，画刷用于形状内部的填充。使用canvas中的`attachPen`和`attachBrush`接口将画笔画刷的实例设置到画布实例中。 55 56 ```js 57 // 创建画布canvas对象 58 const canvas = context.canvas 59 // 创建一个画笔Pen对象，Pen对象用于形状的边框线绘制 60 let pen = new drawing.Pen() 61 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 } 62 pen.setColor(pen_color) 63 64 // 将Pen画笔设置到canvas中 65 canvas.attachPen(pen) 66 67 // 创建一个画刷Brush对象，Brush对象用于形状的填充 68 let brush = new drawing.Brush() 69 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 } 70 brush.setColor(brush_color) 71 72 // 将Brush画刷设置到canvas中 73 canvas.attachBrush(brush) 74 ``` 75 763. **绘制文本**。使用`TextStyle`接口创建一个文本样式实例myTextStyle，示例只设置了文本颜色，使用`ParagraphStyle`接口创建一个段落样式实例myParagraphStyle，并设置文本样式等属性，使用`FontCollection`接口创建一个字体管理器实例fontCollection，使用`ParagraphBuilder`的接口，以myParagraphStyle和fontCollection为参数创建一个段落生成器实例ParagraphGraphBuilder，并调用其接口使文本样式更新以及添加段落文本，在调用build()接口生成段落实例paragraph，最后调用paint接口在屏幕上显示。 77 78 ```js 79 //字体颜色，字重，字体大小等属性由此设置 80 let myTextStyle: text.TextStyle = { 81 color: { alpha: 255, red: 255, green: 0, blue: 0 }, 82 }; 83 //断词类型，换行策略，文本方向以及对齐方式由此设置 84 let myParagraphStyle: text.ParagraphStyle = { 85 textStyle: myTextStyle, 86 align: 3, 87 //wordBreak:text.WordBreak.NORMAL 文本断词类型 88 }; 89 let fontCollection = new text.FontCollection(); 90 let ParagraphGraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection); 91 //更新文本样式 92 ParagraphGraphBuilder.pushStyle(myTextStyle); 93 //添加文本 94 ParagraphGraphBuilder.addText("0123456789"); 95 //生成段落 96 let paragraph = ParagraphGraphBuilder.build(); 97 // 布局 98 paragraph.layoutSync(600); 99 //绘制文本 100 paragraph.paint(canvas, 0, 0); 101 ``` 102 1034. **创建MyRenderNode对象**。以上1到3步构建出了MyRenderNode类并在其中定义了绘图的主要函数，接下来创建一个MyRenderNode对象，并设置它的像素格式。 104 105 ```js 106 // 创建一个MyRenderNode对象 107 const textNode = new MyRenderNode() 108 // 定义newNode的像素格式 109 textNode.frame = { x: 100, y: 100, width: 200, height: 800 } 110 textNode.pivot = { x: 0.2, y: 0.8 } 111 textNode.scale = { x: 1, y: 1 } 112 ``` 113 1145. **创建NodeController子类**。创建`NodeController`的子类`MyNodeController`，并在其中定义创建`FrameNode`的函数。`NodeController`定义了节点容器的控制器，控制着容器里在生命周期中的节点。`FrameNode`定义了节点的基本类型，并包含一个`RenderNode`。 115 116 ```js 117 class MyNodeController extends NodeController { 118 private rootNode: FrameNode | null = null; 119 120 makeNode(uiContext: UIContext): FrameNode { 121 this.rootNode = new FrameNode(uiContext) 122 if (this.rootNode == null) { 123 return this.rootNode 124 } 125 const renderNode = this.rootNode.getRenderNode() 126 if (renderNode != null) { 127 renderNode.frame = { x: 0, y: 0, width: 10, height: 500 } 128 renderNode.pivot = { x: 50, y: 50 } 129 } 130 return this.rootNode 131 } 132 } 133 ``` 134 1356. **创建添加节点的接口**。在第5步中创建的`MyNodeController`类中创建添加`RenderNode`的接口。 136 137 ```js 138 addNode(node: RenderNode): void { 139 if (this.rootNode == null) { 140 return 141 } 142 const renderNode = this.rootNode.getRenderNode() 143 if (renderNode != null) { 144 renderNode.appendChild(node) 145 } 146 } 147 ``` 148 1497. **创建删除节点的接口**。在第5步中创建的`MyNodeController`类中创建删除`RenderNode`的接口。 150 151 ```js 152 clearNodes(): void { 153 if (this.rootNode == null) { 154 return 155 } 156 const renderNode = this.rootNode.getRenderNode() 157 if (renderNode != null) { 158 renderNode.clearChildren() 159 } 160 } 161 ``` 162 1638. **绘制图形和文字**。创建`MyNodeController`实例并将其存入`NodeContainer`，添加button控件供用户点击，并调用已定义的接口。 164 165 ```js 166 @Entry 167 @Component 168 struct RenderTest { 169 private myNodeController: MyNodeController = new MyNodeController() 170 build() { 171 Column() { 172 Row() { 173 NodeContainer(this.myNodeController) 174 .height('100%') 175 Button("Draw Text") 176 .margin({ bottom: 200, right: 12 }) 177 .onClick(() => { 178 this.myNodeController.clearNodes() 179 this.myNodeController.addNode(textNode) 180 }) 181 } 182 .width('100%') 183 .justifyContent(FlexAlign.Center) 184 .shadow(ShadowStyle.OUTER_DEFAULT_SM) 185 .alignItems(VerticalAlign.Bottom) 186 .layoutWeight(1) 187 } 188 } 189 } 190 ``` 191 1929. 绘制与显示的效果图如下： 193 194 | 主页 | 绘制文字(不设置wordBreak) | 绘制文字(设置wordBreak) | 195 | ------------------------------------ | ---------------------------------------- | ------------------------------------ | 196 |  |  |  | 197
