1# 简单文本绘制与显示（ArkTS） 2<!--Kit: ArkGraphics 2D--> 3<!--Subsystem: Graphics--> 4<!--Owner: @oh_wangxk; @gmiao522; @Lem0nC--> 5<!--Designer: @liumingxiang--> 6<!--Tester: @yhl0101--> 7<!--Adviser: @ge-yafang--> 8## 场景介绍 9 10在一个简单的用户界面中，可能只需要展示几行静态文本，例如标签、按钮上的文字、菜单项或状态栏中的提示信息。此时，开发者只需要选择合适的字体、大小和颜色即可完成渲染。 11 12## 相关属性 13 14此场景示例，涉及到的文本样式属性如下，具体及更多文本样式可参考[TextStyle](../reference/apis-arkgraphics2d/js-apis-graphics-text.md#textstyle)。 15 16- color：字体颜色，默认为白色。请注意与画布颜色进行区分，以保证文本的正常显示。 17 18- fontSize：字体大小，浮点数，默认为14.0，单位为物理像素px。 19 20 21## 开发步骤 22 231. 通过context获取到Canvas画布对象。 24 25 ```ts 26 let canvas = context.canvas; 27 ``` 28 292. 初始化文本样式，此处设置字体颜色为红色，字体大小为50。 30 31 ```ts 32 let myTextStyle: text.TextStyle = { 33 // 文本颜色 34 color: { 35 alpha: 255, 36 red: 255, 37 green: 0, 38 blue: 0 39 }, 40 // 文本大小 41 fontSize: 50 42 }; 43 ``` 44 453. 初始化段落样式。 46 47 ```ts 48 // 设置段落样式 49 let myParagraphStyle: text.ParagraphStyle = { 50 textStyle: myTextStyle, 51 }; 52 ``` 53 544. 初始化段落对象，并添加文本。 55 56 ```ts 57 let fontCollection = text.FontCollection.getGlobalInstance(); 58 let paragraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection); 59 // 更新文本样式 60 paragraphBuilder.pushStyle(myTextStyle); 61 // 添加文本 62 paragraphBuilder.addText("Hello World"); 63 ``` 64 655. 排版段落并进行文本绘制。 66 67 ```ts 68 // 生成段落 69 let paragraph = paragraphBuilder.build(); 70 // 布局 71 paragraph.layoutSync(1250); 72 // 绘制文本 73 paragraph.paint(canvas, 10, 0); 74 ``` 75 76 77## 完整示例 78 79```ts 80import { NodeController, FrameNode, RenderNode, DrawContext } from '@kit.ArkUI' 81import { UIContext } from '@kit.ArkUI' 82import { drawing } from '@kit.ArkGraphics2D' 83import { text } from '@kit.ArkGraphics2D' 84import { image } from '@kit.ImageKit' 85import { common2D } from '@kit.ArkGraphics2D' 86 87// 创建一个MyRenderNode类，并绘制文本。 88class MyRenderNode extends RenderNode { 89 async draw(context: DrawContext) { 90 91 // 绘制代码逻辑写在这里 92 let canvas = context.canvas; 93 94 let myTextStyle: text.TextStyle = { 95 // 文本颜色 96 color: { 97 alpha: 255, 98 red: 255, 99 green: 0, 100 blue: 0 101 }, 102 // 文本大小 103 fontSize: 100 104 }; 105 106 let myParagraphStyle: text.ParagraphStyle = { 107 textStyle: myTextStyle, 108 }; 109 let fontCollection = text.FontCollection.getGlobalInstance(); 110 let paragraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection); 111 // 更新文本样式 112 paragraphBuilder.pushStyle(myTextStyle); 113 // 添加文本 114 paragraphBuilder.addText("Hello World"); 115 116 // 生成段落 117 let paragraph = paragraphBuilder.build(); 118 // 布局 119 paragraph.layoutSync(1250); 120 // 绘制文本 121 paragraph.paint(canvas, 10, 800); 122 } 123} 124 125// 创建一个MyRenderNode对象 126const textNode = new MyRenderNode() 127// 定义newNode的像素格式 128textNode.frame = { 129 x: 0, 130 y: 100, 131 width: 1250, 132 height: 800 133} 134textNode.pivot = { x: 0.2, y: 0.8 } 135textNode.scale = { x: 1, y: 1 } 136 137class MyNodeController extends NodeController { 138 private rootNode: FrameNode | null = null; 139 140 makeNode(uiContext: UIContext): FrameNode { 141 this.rootNode = new FrameNode(uiContext) 142 if (this.rootNode == null) { 143 return this.rootNode 144 } 145 const renderNode = this.rootNode.getRenderNode() 146 if (renderNode != null) { 147 renderNode.frame = { 148 x: 0, 149 y: 0, 150 width: 10, 151 height: 500 152 } 153 } 154 return this.rootNode 155 } 156 157 addNode(node: RenderNode): void { 158 if (this.rootNode == null) { 159 return 160 } 161 const renderNode = this.rootNode.getRenderNode() 162 if (renderNode != null) { 163 renderNode.appendChild(node) 164 } 165 } 166 167 clearNodes(): void { 168 if (this.rootNode == null) { 169 return 170 } 171 const renderNode = this.rootNode.getRenderNode() 172 if (renderNode != null) { 173 renderNode.clearChildren() 174 } 175 } 176} 177 178let myNodeController: MyNodeController = new MyNodeController() 179 180async function performTask() { 181 myNodeController.clearNodes() 182 myNodeController.addNode(textNode) 183} 184 185@Entry 186@Component 187struct Font08 { 188 @State src: Resource = $r('app.media.startIcon') 189 build() { 190 Column() { 191 Row() { 192 NodeContainer(myNodeController) 193 .height('100%') 194 .width('100%') 195 Image(this.src) 196 .width('0%').height('0%') 197 .onComplete( 198 () => { 199 performTask(); 200 }) 201 } 202 .width('100%') 203 } 204 } 205} 206``` 207 208## 效果展示 209 210 211
