1# 复杂文本绘制与显示（C/C++） 2 3在进行文本绘制时，可以通过选择合适的字体、大小和颜色完成简单文本的绘制与显示；此外，还支持通过设置其他丰富的样式、语言、段落等进行复杂文本的绘制。 4 5复杂文本绘制主要包含以下几个场景： 6 7- 多语言文本绘制与显示 8 9- 多行文本绘制与显示 10 11- 多类型文本绘制与显示 12 13 14## 多语言文本绘制与显示 15 16多语言支持是全球化应用的基础。多语言文本绘制需要支持不同语言的字符集及其独特的显示需求，例如右到左语言（如阿拉伯语）或竖排文本（如中文）。开发者需要理解不同语言的渲染特性，确保文本的正确显示。 17 18在多语言文本使用的场景下，主要通过指定TextStyle文本样式中的**locale**字段来实现，可直接通过locale字段的值优先匹配对应字体，跳过遍历列表匹配字体的过程，从而降低匹配时间和内存使用。 19 20### 接口说明 21 22| 接口定义 | 描述 | 23| -------- | -------- | 24| void OH_Drawing_SetTypographyTextLocale(OH_Drawing_TypographyStyle\* style, const char\* locale) | 设置指定排版样式的语言环境。 | 25 26 27### 开发步骤 28 29画布Canvas对象具体可见[画布的获取与绘制结果的显示](canvas-get-result-draw-c.md)。 30 31```c++ 32// 创建一个 TypographyStyle，创建 TypographyCreate 时需要使用 33OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 34// 设置文本对齐方式为居中 35OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 36// 设置 locale 为中文 37OH_Drawing_SetTypographyTextLocale(typoStyle, "zh-Hans"); 38 39// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 40OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle(); 41OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 42OH_Drawing_SetTextStyleFontSize(txtStyle, 100); 43OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400); 44 45// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 46OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 47// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 48OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 49 50// 将之前创建的 TextStyle 加入 handler 中 51OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle); 52// 设置文本内容，并将文本添加到 handler 中 53const char *text = "你好，中文\n"; 54OH_Drawing_TypographyHandlerAddText(handler, text); 55 56// 通过 handler 创建一个 Typography 57OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler); 58// 设置排版宽度 59double layoutWidth = 1310; 60OH_Drawing_TypographyLayout(typography, layoutWidth); 61// 设置文本在画布上绘制的起始位置 62double position[2] = {0, 1140}; 63// 将文本绘制到画布上 64OH_Drawing_TypographyPaint(typography, canvas, position[0], position[1]); 65 66// 释放内存 67OH_Drawing_DestroyTypographyStyle(typoStyle); 68OH_Drawing_DestroyTextStyle(txtStyle); 69OH_Drawing_DestroyFontCollection(fc); 70OH_Drawing_DestroyTypographyHandler(handler); 71OH_Drawing_DestroyTypography(typography); 72``` 73 74 75### 效果展示 76 77 78 79 80## 多行文本绘制与显示 81 82多行文本相对于单行文本比较复杂，一般针对多行文本，需要进行文本排版、断词策略设置、文本对齐方式、最大行数限制等，主要通过设置段落样式实现。 83 84 85### 接口说明 86 87| 接口定义 | 描述 | 88| -------- | -------- | 89| void OH_Drawing_SetTypographyTextAlign(OH_Drawing_TypographyStyle\* style, int align) | 设置文本对齐方式。 | 90| void OH_Drawing_SetTypographyTextWordBreakType(OH_Drawing_TypographyStyle\* style, int wordBreakType) | 设置单词的断词方式。 | 91| void OH_Drawing_SetTypographyTextMaxLines(OH_Drawing_TypographyStyle\* style, int lineNumber) | 设置文本最大行数。 | 92 93 94### 开发步骤 95 96```c++ 97// 设置排版宽度 98double layoutWidth = 1310; 99// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 100OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 101 102// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 103OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle(); 104OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 105OH_Drawing_SetTextStyleFontSize(txtStyle, 50); 106OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400); 107 108// 设置文本内容 109const char *text = 110 "Nunc quis augue viverra, venenatis arcu eu, gravida odio. Integer posuere nisi quis ex pretium, a dapibus " 111 "nisl gravida. Mauris lacinia accumsan enim, non tempus ligula. Mauris iaculis dui eu nisi tristique, in porta " 112 "urna varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris " 113 "congue nibh mi, vel ultrices ex volutpat et. Aliquam consectetur odio in libero tristique, a mattis ex " 114 "mollis. Praesent et nisl iaculis, facilisis metus nec, faucibus lacus. Duis nec dolor at nibh eleifend " 115 "tempus. Nunc et enim interdum, commodo eros ac, pretium sapien. Pellentesque laoreet orci a nunc pharetra " 116 "pharetra."; 117 118 119// 创建一个断词策略为 BREAK_ALL 的 TypographyStyle 120OH_Drawing_TypographyStyle *typoStyleBreakAll = OH_Drawing_CreateTypographyStyle(); 121// 设置文本对齐方式为居中 122OH_Drawing_SetTypographyTextAlign(typoStyleBreakAll, TEXT_ALIGN_CENTER); 123// 设置断词策略为 WORD_BREAK_TYPE_BREAK_ALL 124OH_Drawing_SetTypographyTextWordBreakType(typoStyleBreakAll, OH_Drawing_WordBreakType::WORD_BREAK_TYPE_BREAK_ALL); 125// 设置最大行数为 10，行数大于 10 的部分不显示 126OH_Drawing_SetTypographyTextMaxLines(typoStyleBreakAll, 10); 127 128// 使用之前创建的 FontCollection 和 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 129OH_Drawing_TypographyCreate *handlerBreakAll = OH_Drawing_CreateTypographyHandler(typoStyleBreakAll, fc); 130// 将之前创建的 TextStyle 加入 handler 131OH_Drawing_TypographyHandlerPushTextStyle(handlerBreakAll, txtStyle); 132// 将文本添加到 handler 中 133OH_Drawing_TypographyHandlerAddText(handlerBreakAll, text); 134 135OH_Drawing_Typography *typographyBreakAll = OH_Drawing_CreateTypography(handlerBreakAll); 136OH_Drawing_TypographyLayout(typographyBreakAll, layoutWidth); 137// 设置文本在画布上绘制的起始位置 138double positionBreakAll[2] = {0, 0}; 139// 将文本绘制到画布上 140OH_Drawing_TypographyPaint(typographyBreakAll, cCanvas_, positionBreakAll[0], positionBreakAll[1]); 141 142 143// 创建一个断词策略为 BREAK_WORD 的 TypographyStyle 144OH_Drawing_TypographyStyle *typoStyleBreakWord = OH_Drawing_CreateTypographyStyle(); 145// 设置文本对齐方式为居中 146OH_Drawing_SetTypographyTextAlign(typoStyleBreakWord, TEXT_ALIGN_CENTER); 147// 设置断词策略为 WORD_BREAK_TYPE_BREAK_WORD 148OH_Drawing_SetTypographyTextWordBreakType(typoStyleBreakWord, OH_Drawing_WordBreakType::WORD_BREAK_TYPE_BREAK_WORD); 149 150// 使用之前创建的 FontCollection 和 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 151OH_Drawing_TypographyCreate *handlerBreakWord = OH_Drawing_CreateTypographyHandler(typoStyleBreakWord, fc); 152// 将之前创建的 TextStyle 加入 handler 153OH_Drawing_TypographyHandlerPushTextStyle(handlerBreakWord, txtStyle); 154// 将文本添加到 handler 中 155OH_Drawing_TypographyHandlerAddText(handlerBreakWord, text); 156 157OH_Drawing_Typography *typographyBreakWord = OH_Drawing_CreateTypography(handlerBreakWord); 158OH_Drawing_TypographyLayout(typographyBreakWord, layoutWidth); 159// 设置文本在画布上绘制的起始位置 160double positionBreakWord[2] = {0, 1140}; 161// 将文本绘制到画布上 162OH_Drawing_TypographyPaint(typographyBreakWord, canvas, positionBreakWord[0], positionBreakWord[1]); 163 164// 释放内存 165OH_Drawing_DestroyFontCollection(fc); 166OH_Drawing_DestroyTextStyle(txtStyle); 167OH_Drawing_DestroyTypographyStyle(typoStyleBreakAll); 168OH_Drawing_DestroyTypographyStyle(typoStyleBreakWord); 169OH_Drawing_DestroyTypographyHandler(handlerBreakAll); 170OH_Drawing_DestroyTypographyHandler(handlerBreakWord); 171OH_Drawing_DestroyTypography(typographyBreakAll); 172OH_Drawing_DestroyTypography(typographyBreakWord); 173``` 174 175 176### 效果展示 177 178 179 180 181## 多样式文本绘制与显示 182 183除基本文字、排版属性之外，针对应用中不同文本的设计，开发者可能需要设置使用不同的绘制样式或能力，以凸显对应文本的独特表现或风格，此时可以结合使用多种绘制样式进行文本的渲染。 184 185当前支持的多样式绘制及各绘制样式侧重效果如下： 186 187- **装饰线样式绘制：** 主要通过不同的线条样式对文本进行装饰，可以使文本更加突出，富有表现力。 188 189- **字体特性绘制：** 主要通过字体的变化，包括粗细、斜体等特性来改变文本的外观，增强文本的可读性和美观性。 190 191- **可变字体绘制：** 对应提供文本在不同的显示环境和设备上灵活灵活调整的能力，可满足更为精细的视觉效果。 192 193- **文本阴影绘制：** 主要通过在文本周围添加阴影效果，以提升文本的层次感和立体感，从而使文本更具吸引力。 194 195- **占位符绘制：** 可以在不确定文本内容时保持文本布局的稳定性，使得文本显示更为流畅和自然。 196 197 198### 装饰线 199 200**装饰线**是指在文本上方、下方或中间添加的装饰性线条，当前支持上划线、下划线、删除线。 201 202可以通过添加文本装饰线，提升文本的视觉效果和可读性。 203 204使用装饰线需要初始化装饰线样式对象，并添加到文本样式中，从而在文本绘制时生效。 205 206 207| 接口定义 | 描述 | 208| -------- | -------- | 209| void OH_Drawing_SetTextStyleDecoration(OH_Drawing_TextStyle\* style, int decoration) | 设置指定文本样式中的装饰线类型，只能设置一个装饰线类型，添加多个需要使用OH_Drawing_AddTextStyleDecoration。 | 210| void OH_Drawing_SetTextStyleDecorationStyle(OH_Drawing_TextStyle\* style, int decorationStyle) | 设置指定文本样式中的装饰线样式。 | 211| void OH_Drawing_SetTextStyleDecorationColor(OH_Drawing_TextStyle\* style, uint32_t color) | 设置指定文本样式中的装饰线颜色。 | 212 213 214示例及示意效果如下所示： 215 216```c++ 217// 创建一个TypographyStyle创建Typography时需要使用 218OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 219// 设置文本对齐方式为居中 220OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 221// 设置文本内容 222const char *text = "Hello World Drawing\n"; 223 224// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 225OH_Drawing_TextStyle *txtStyleWithDeco = OH_Drawing_CreateTextStyle(); 226OH_Drawing_SetTextStyleColor(txtStyleWithDeco, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 227OH_Drawing_SetTextStyleFontSize(txtStyleWithDeco, 100); 228OH_Drawing_SetTextStyleFontWeight(txtStyleWithDeco, FONT_WEIGHT_400); 229// 设置装饰线为 LINE_THROUGH 230OH_Drawing_SetTextStyleDecoration(txtStyleWithDeco, OH_Drawing_TextDecoration::TEXT_DECORATION_LINE_THROUGH); 231// 设置装饰线样式为 WAVY 232OH_Drawing_SetTextStyleDecorationStyle(txtStyleWithDeco, OH_Drawing_TextDecorationStyle::TEXT_DECORATION_STYLE_WAVY); 233// 设置装饰线颜色 234OH_Drawing_SetTextStyleDecorationColor(txtStyleWithDeco, OH_Drawing_ColorSetArgb(0xFF, 0x6F, 0xFF, 0xFF)); 235 236// 创建一个不带装饰线的 TextStyle 用于对比 237OH_Drawing_TextStyle *txtStyleNoDeco = OH_Drawing_CreateTextStyle(); 238// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 239OH_Drawing_SetTextStyleColor(txtStyleNoDeco, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 240OH_Drawing_SetTextStyleFontSize(txtStyleNoDeco, 100); 241OH_Drawing_SetTextStyleFontWeight(txtStyleNoDeco, FONT_WEIGHT_400); 242 243// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 244OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 245// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 246OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 247 248// 加入带有装饰线的文本样式 249OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithDeco); 250// 将文本添加到 handler 中 251OH_Drawing_TypographyHandlerAddText(handler, text); 252 253// 后续加入的不带装饰线的文本样式 254OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoDeco); 255// 将文本添加到 handler 中 256OH_Drawing_TypographyHandlerAddText(handler, text); 257 258OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler); 259// 设置排版宽度 260double layoutWidth = 1310; 261OH_Drawing_TypographyLayout(typography, layoutWidth); 262// 设置文本在画布上绘制的起始位置 263double position[2] = {0, 1140}; 264// 将文本绘制到画布上 265OH_Drawing_TypographyPaint(typography, canvas, position[0], position[1]); 266 267// 释放内存 268OH_Drawing_DestroyTypographyStyle(typoStyle); 269OH_Drawing_DestroyTextStyle(txtStyleWithDeco); 270OH_Drawing_DestroyTextStyle(txtStyleNoDeco); 271OH_Drawing_DestroyFontCollection(fc); 272OH_Drawing_DestroyTypographyHandler(handler); 273OH_Drawing_DestroyTypography(typography); 274``` 275 276 277 278 279 280### 字体特征 281 282**字体特征**绘制专注于在文本渲染过程中对字体特性（如粗体、斜体、字体变种等）的处理，允许字体在不同的排版场景下表现出不同的效果，可用于增强文本的表现力，使其更符合设计和阅读需求。 283 284常见的**FontFeature**包含有liga、frac、case等，需要对应的ttf文件支持才能正常使能。 285 286 287| 接口定义 | 描述 | 288| -------- | -------- | 289| void OH_Drawing_TextStyleAddFontFeature(OH_Drawing_TextStyle\* style, const char\* tag, int value) | 设置文本样式中指定字体特征是否启用。 | 290 291 292示例及示意效果如下所示： 293 294 295```c++ 296// 创建一个 TypographyStyle，创建 TypographyCreate 时需要使用 297OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 298// 设置文本对齐方式为居中 299OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 300// 设置文本内容 301const char *text = "1/2 1/3 1/4\n"; 302 303// 设置文字颜色、大小、字重，不设置TextStyle无法绘制出文本 304OH_Drawing_TextStyle *txtStyleWithFeature = OH_Drawing_CreateTextStyle(); 305OH_Drawing_SetTextStyleColor(txtStyleWithFeature, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 306OH_Drawing_SetTextStyleFontSize(txtStyleWithFeature, 100); 307OH_Drawing_SetTextStyleFontWeight(txtStyleWithFeature, FONT_WEIGHT_900); 308// 设置启用frac font feature，此功能将斜线分隔的数字替换为普通（对角线）分数。 309OH_Drawing_TextStyleAddFontFeature(txtStyleWithFeature, "frac", 1); 310 311// 创建一个不带字体特征的 TextStyle 用于对比 312OH_Drawing_TextStyle *txtStyleNoFeature = OH_Drawing_CreateTextStyle(); 313// 设置文字颜色、大小、字重。不设置 TextStyle 无法绘制出文本 314OH_Drawing_SetTextStyleColor(txtStyleNoFeature, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 315OH_Drawing_SetTextStyleFontSize(txtStyleNoFeature, 100); 316OH_Drawing_SetTextStyleFontWeight(txtStyleNoFeature, FONT_WEIGHT_900); 317 318// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 319OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 320// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 321OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 322 323// 加入带有字体特征的文本样式 324OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithFeature); 325// 将文本添加到 handler 中 326OH_Drawing_TypographyHandlerAddText(handler, text); 327// 销毁之前创建的 TextStyle 328OH_Drawing_TypographyHandlerPopTextStyle(handler); 329 330// 后续加入的不带字体特征的文本样式 331OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoFeature); 332// 将文本添加到 handler 中 333OH_Drawing_TypographyHandlerAddText(handler, text); 334// 销毁之前创建的 TextStyle 335OH_Drawing_TypographyHandlerPopTextStyle(handler); 336 337OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler); 338// 设置排版宽度 339double layoutWidth = 1310; 340OH_Drawing_TypographyLayout(typography, layoutWidth); 341// 设置文本在画布上绘制的起始位置 342double position[2] = {0, 1140}; 343// 将文本绘制到画布上 344OH_Drawing_TypographyPaint(typography, canvas, position[0], position[1]); 345 346// 释放内存 347OH_Drawing_DestroyTypographyStyle(typoStyle); 348OH_Drawing_DestroyTextStyle(txtStyleWithFeature); 349OH_Drawing_DestroyTextStyle(txtStyleNoFeature); 350OH_Drawing_DestroyFontCollection(fc); 351OH_Drawing_DestroyTypographyHandler(handler); 352OH_Drawing_DestroyTypography(typography); 353``` 354 355 356 357 358 359### 可变字体 360 361**可变字体**是一种在一个字体文件中包含多个字形变体的字体格式，允许在一个字体文件内灵活地调整字体的各种属性（如字重、字宽、斜体等）。 362 363与传统字体文件（每种变体需要一个独立的文件）不同，可变字体在一个字体文件中包含多个变体轴，可通过使用可变字体实现文本渲染绘制时的平滑过渡。 364 365 366| 接口定义 | 描述 | 367| -------- | -------- | 368| void OH_Drawing_TextStyleAddFontVariation(OH_Drawing_TextStyle\* style, const char\* axis, const float value) | 添加可变字体属性。对应的字体文件（.ttf文件）需要支持可变调节，此接口才能生效。当对应的字体不支持可变调节时，此接口调用不生效。 | 369 370 371示例及示意效果如下所示： 372 373 374```c++ 375// 创建一个 TypographyStyle 创建 Typography 时需要使用 376OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 377// 设置文本对齐方式为居中 378OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 379// 设置文字内容 380const char *text = "Hello World Drawing\n"; 381 382OH_Drawing_TextStyle *txtStyleWithVar = OH_Drawing_CreateTextStyle(); 383// 设置可变字体的字重，在字体文件支持的情况下，还可以设置"slnt", "wdth"。 384OH_Drawing_TextStyleAddFontVariation(txtStyleWithVar, "wght", 800); 385// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 386OH_Drawing_SetTextStyleColor(txtStyleWithVar, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 387OH_Drawing_SetTextStyleFontSize(txtStyleWithVar, 100); 388// 此处设置字重不生效，被可变字体的字重覆盖了。 389OH_Drawing_SetTextStyleFontWeight(txtStyleWithVar, FONT_WEIGHT_400); 390 391// 创建一个不带可变字体的 TextStyle 用于对比 392OH_Drawing_TextStyle *txtStyleNoVar = OH_Drawing_CreateTextStyle(); 393// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 394OH_Drawing_SetTextStyleColor(txtStyleNoVar, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 395OH_Drawing_SetTextStyleFontSize(txtStyleNoVar, 100); 396OH_Drawing_SetTextStyleFontWeight(txtStyleNoVar, FONT_WEIGHT_400); 397 398// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 399OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 400// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 401OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 402 403// 加入带有可变字体的文本样式 404OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithVar); 405// 将文本添加到 handler 中 406OH_Drawing_TypographyHandlerAddText(handler, text); 407// 销毁之前创建的 TextStyle 408OH_Drawing_TypographyHandlerPopTextStyle(handler); 409 410// 后续加入的不带可变字体的文本样式 411OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoVar); 412// 将文本添加到 handler 中 413OH_Drawing_TypographyHandlerAddText(handler, text); 414// 销毁之前创建的 TextStyle 415OH_Drawing_TypographyHandlerPopTextStyle(handler); 416 417OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler); 418// 设置排版宽度 419double layoutWidth = 1310; 420OH_Drawing_TypographyLayout(typography, layoutWidth); 421// 设置文本在画布上绘制的起始位置 422double position[2] = {0, 1140}; 423// 将文本绘制到画布上 424OH_Drawing_TypographyPaint(typography, canvas, position[0], position[1]); 425 426// 释放内存 427OH_Drawing_DestroyTypographyStyle(typoStyle); 428OH_Drawing_DestroyTextStyle(txtStyleWithVar); 429OH_Drawing_DestroyTextStyle(txtStyleNoVar); 430OH_Drawing_DestroyFontCollection(fc); 431OH_Drawing_DestroyTypographyHandler(handler); 432OH_Drawing_DestroyTypography(typography); 433``` 434 435 436 437 438 439### 文本阴影 440 441**文本阴影**为文本提供了深度感，使得文本在背景上更具立体感。通常用于提升文本的视觉吸引力或增强可读性，尤其是在色彩对比度较低的场景下。 442 443其中，TextShadow有三个属性，分别为阴影颜色color、阴影基于当前文本的偏移位置point、阴影半径blurRadius。 444 445使用阴影效果需要在文本样式中设置对应的阴影效果数组，从而在文本绘制时生效。 446 447 448| 接口定义 | 描述 | 449| -------- | -------- | 450| OH_Drawing_Point\* OH_Drawing_PointCreate(float x, float y) | 用于创建一个坐标点对象。 | 451| OH_Drawing_TextShadow\* OH_Drawing_CreateTextShadow(void) | 创建指向字体阴影对象的指针。 | 452| void OH_Drawing_SetTextShadow(OH_Drawing_TextShadow\* shadow, uint32_t color, OH_Drawing_Point\* offset, double blurRadius) | 设置字体阴影对象的参数。 | 453| void OH_Drawing_TextStyleAddShadow(OH_Drawing_TextStyle\* style, const OH_Drawing_TextShadow\* shadow) | 字体阴影容器中添加字体阴影元素。 | 454| void OH_Drawing_DestroyTextShadow(OH_Drawing_TextShadow\* shadow) | 释放被字体阴影对象占据的内存。 | 455 456 457示例及示意效果如下所示： 458 459 460```c++ 461// 创建一个 TypographyStyle 创建 Typography 时需要使用 462OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 463// 设置文本对齐方式为居中 464OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 465// 设置文本内容 466const char *text = "Hello World Drawing\n"; 467 468// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 469OH_Drawing_TextStyle *txtStyleWithShadow = OH_Drawing_CreateTextStyle(); 470OH_Drawing_SetTextStyleColor(txtStyleWithShadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 471OH_Drawing_SetTextStyleFontSize(txtStyleWithShadow, 100); 472OH_Drawing_SetTextStyleFontWeight(txtStyleWithShadow, FONT_WEIGHT_400); 473// 设置阴影偏移量 474OH_Drawing_Point *offset = OH_Drawing_PointCreate(1, 1); 475OH_Drawing_TextShadow *shadow = OH_Drawing_CreateTextShadow(); 476// 为 TextShadow 设置样式 477OH_Drawing_SetTextShadow(shadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00), offset, 10); 478// 将 TextShadow 加入 TextStyle 479OH_Drawing_TextStyleAddShadow(txtStyleWithShadow, shadow); 480 481// 创建一个不带阴影的 TextStyle 用于对比 482OH_Drawing_TextStyle *txtStyleNoShadow = OH_Drawing_CreateTextStyle(); 483// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 484OH_Drawing_SetTextStyleColor(txtStyleNoShadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 485OH_Drawing_SetTextStyleFontSize(txtStyleNoShadow, 100); 486OH_Drawing_SetTextStyleFontWeight(txtStyleNoShadow, FONT_WEIGHT_400); 487 488// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 489OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 490// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 491OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 492 493// 加入带有阴影的文本样式 494OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithShadow); 495// 将文本添加到 handler 中 496OH_Drawing_TypographyHandlerAddText(handler, text); 497 498// 后续加入的不带阴影的文本样式 499OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoShadow); 500// 将文本添加到 handler 中 501OH_Drawing_TypographyHandlerAddText(handler, text); 502 503OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler); 504// 设置排版宽度 505double layoutWidth = 1310; 506OH_Drawing_TypographyLayout(typography, layoutWidth); 507// 设置文本在画布上绘制的起始位置 508double position[2] = {0, 1140}; 509// 将文本绘制到画布上 510OH_Drawing_TypographyPaint(typography, canvas, position[0], position[1]); 511 512// 释放内存 513OH_Drawing_DestroyTypographyStyle(typoStyle); 514OH_Drawing_DestroyTextStyle(txtStyleWithShadow); 515OH_Drawing_DestroyTextShadow(shadow); 516OH_Drawing_DestroyTextStyle(txtStyleNoShadow); 517OH_Drawing_DestroyFontCollection(fc); 518OH_Drawing_DestroyTypographyHandler(handler); 519OH_Drawing_DestroyTypography(typography); 520``` 521 522 523 524 525 526### 占位符 527 528占位符绘制用于处理文本中占位符符号的渲染。 529 530占位符也是用来实现图文混排的关键，是指在实际图像或内容注册之前，用来预先提供或替代某个位置的视觉元素。 531 532 533| 接口定义 | 描述 | 534| -------- | -------- | 535| void OH_Drawing_TypographyHandlerAddPlaceholder(OH_Drawing_TypographyCreate\* handler, OH_Drawing_PlaceholderSpan\* span) | 设置占位符。 | 536 537 538示例及示意效果如下所示： 539 540 541```c++ 542// 设置排版宽度 543double layoutWidth = 1310; 544// 创建 FontCollection，FontCollection 用于管理字体匹配逻辑 545OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection(); 546 547// 设置文字颜色、大小、字重，不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle 548OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle(); 549OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00)); 550OH_Drawing_SetTextStyleFontSize(txtStyle, 100); 551OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400); 552 553// 设置文本内容 554const char *text = "Hello World Drawing\n"; 555 556// 创建一个 TypographyStyle 创建 Typography 时需要使用 557OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle(); 558// 设置文本对齐方式为居中 559OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER); 560 561// 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography 562OH_Drawing_TypographyCreate *handlerWithPlaceholder = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 563// 创建一个 placeholder，并且初始化其成员变量 564OH_Drawing_PlaceholderSpan placeholder; 565placeholder.width = 200.0; 566placeholder.height = 200.0; 567placeholder.alignment = OH_Drawing_PlaceholderVerticalAlignment::ALIGNMENT_ABOVE_BASELINE; // 基线对齐策略 568placeholder.baseline = OH_Drawing_TextBaseline::TEXT_BASELINE_ALPHABETIC; // 使用的文本基线类型 569placeholder.baselineOffset = 0.0; // 相比基线的偏移量。只有对齐策略是 OFFSET_AT_BASELINE 时生效 570 571// 将 placeholder 放在开头 572OH_Drawing_TypographyHandlerAddPlaceholder(handlerWithPlaceholder, &placeholder); 573 574// 将之前创建的 TextStyle 加入 handler 575OH_Drawing_TypographyHandlerPushTextStyle(handlerWithPlaceholder, txtStyle); 576// 将文本添加到 handler 中 577OH_Drawing_TypographyHandlerAddText(handlerWithPlaceholder, text); 578 579OH_Drawing_Typography *typographyWithPlaceholder = OH_Drawing_CreateTypography(handlerWithPlaceholder); 580OH_Drawing_TypographyLayout(typographyWithPlaceholder, layoutWidth); 581// 设置文本在画布上绘制的起始位置 582double positionBreakAll[2] = {0, 0}; 583// 将文本绘制到画布上 584OH_Drawing_TypographyPaint(typographyWithPlaceholder, cCanvas_, positionBreakAll[0], positionBreakAll[1]); 585 586// 创建 OH_Drawing_TypographyCreate 587OH_Drawing_TypographyCreate *handlerNoPlaceholder = OH_Drawing_CreateTypographyHandler(typoStyle, fc); 588// 将之前创建的 TextStyle 加入 handler 589OH_Drawing_TypographyHandlerPushTextStyle(handlerNoPlaceholder, txtStyle); 590// 将文本添加到 handler 中 591OH_Drawing_TypographyHandlerAddText(handlerNoPlaceholder, text); 592 593OH_Drawing_Typography *typographyNoPlaceholder = OH_Drawing_CreateTypography(handlerNoPlaceholder); 594OH_Drawing_TypographyLayout(typographyNoPlaceholder, layoutWidth); 595// 设置文本在画布上绘制的起始位置 596double positionBreakWord[2] = {0, 1140}; 597// 将文本绘制到画布上 598OH_Drawing_TypographyPaint(typographyNoPlaceholder, canvas, positionBreakWord[0], positionBreakWord[1]); 599 600// 释放内存 601OH_Drawing_DestroyFontCollection(fc); 602OH_Drawing_DestroyTextStyle(txtStyle); 603OH_Drawing_DestroyTypographyStyle(typoStyle); 604OH_Drawing_DestroyTypographyHandler(handlerWithPlaceholder); 605OH_Drawing_DestroyTypographyHandler(handlerNoPlaceholder); 606OH_Drawing_DestroyTypography(typographyWithPlaceholder); 607OH_Drawing_DestroyTypography(typographyNoPlaceholder); 608``` 609 610 611 612
