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