文档管理中心
我的

复杂文本绘制与显示(C/C++)

在进行文本绘制时,可以通过选择合适的字体、大小和颜色完成简单文本的绘制与显示;此外,还支持通过设置其他丰富的样式、语言、段落等进行复杂文本的绘制。

复杂文本绘制主要包含以下几个场景:

  • 多语言文本绘制与显示

  • 多行文本绘制与显示

  • 多样式文本绘制与显示

  • 样式的拷贝、绘制与显示

多语言文本绘制与显示

多语言支持是全球化应用的基础。多语言文本绘制需要支持不同语言的字符集及其独特的显示需求,例如右到左语言(如阿拉伯语)或竖排文本(如中文)。开发者需要理解不同语言的渲染特性,确保文本的正确显示。

在多语言文本使用的场景下,主要通过指定TextStyle文本样式中的locale字段来实现,可直接通过locale字段的值优先匹配对应字体,跳过遍历列表匹配字体的过程,从而降低匹配时间和内存使用。

接口说明

多语言文本绘制的相关接口如下所示,详细接口说明请参考drawing_text_typography.h。

展开
接口定义 描述
void OH_Drawing_SetTypographyTextLocale(OH_Drawing_TypographyStyle* style, const char* locale) 设置指定排版样式的语言环境。

开发步骤

画布Canvas对象具体可见画布的获取与绘制结果的显示。

收起
自动换行
深色代码主题
复制
  1. // 创建一个 TypographyStyle,创建 TypographyCreate 时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置文本对齐方式为居中
  4. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  5. // 设置 locale 为中文
  6. OH_Drawing_SetTypographyTextLocale(typoStyle, "zh-Hans");
  7. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  8. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  9. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  11. OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400);
  12. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  13. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  14. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  15. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  16. // 将之前创建的 TextStyle 加入 handler 中
  17. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  18. // 设置文本内容,并将文本添加到 handler 中
  19. const char *text = "你好,中文\n";
  20. OH_Drawing_TypographyHandlerAddText(handler, text);
  21. // 通过 handler 创建一个 Typography
  22. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  23. // 设置页面最大宽度
  24. double maxWidth = width_;
  25. OH_Drawing_TypographyLayout(typography, maxWidth);
  26. // 将文本绘制到画布上
  27. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  28. // 释放内存
  29. OH_Drawing_DestroyTypographyStyle(typoStyle);
  30. OH_Drawing_DestroyTextStyle(txtStyle);
  31. OH_Drawing_DestroyFontCollection(fc);
  32. OH_Drawing_DestroyTypographyHandler(handler);
  33. OH_Drawing_DestroyTypography(typography);

效果展示

多行文本绘制与显示

多行文本相对于单行文本比较复杂,一般针对多行文本,需要进行文本排版、断词策略设置、文本对齐方式、最大行数限制等,主要通过设置段落样式实现。

接口说明

多行文本绘制的相关接口如下所示,详细接口说明请参考drawing_text_typography.h。

展开
接口定义 描述
void OH_Drawing_SetTypographyTextAlign(OH_Drawing_TypographyStyle* style, int align) 设置文本对齐方式。
void OH_Drawing_SetTypographyTextWordBreakType(OH_Drawing_TypographyStyle* style, int wordBreakType) 设置单词的断词方式。
void OH_Drawing_SetTypographyTextMaxLines(OH_Drawing_TypographyStyle* style, int lineNumber) 设置文本最大行数。

开发步骤

以下以断行策略为 BREAK_ALL 的场景为例,其余策略同理。

收起
自动换行
深色代码主题
复制
  1. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  2. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  3. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  4. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  5. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  6. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TWENTY(width_));
  7. OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400);
  8. // 设置文本内容
  9. const char *text =
  10. "Nunc quis augue viverra, venenatis arcu eu, gravida odio. Integer posuere nisi quis ex pretium, a dapibus "
  11. "nisl gravida. Mauris lacinia accumsan enim, non tempus ligula. Mauris iaculis dui eu nisi tristique, in porta "
  12. "urna varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris "
  13. "congue nibh mi, vel ultrices ex volutpat et. Aliquam consectetur odio in libero tristique, a mattis ex "
  14. "mollis. Praesent et nisl iaculis, facilisis metus nec, faucibus lacus. Duis nec dolor at nibh eleifend "
  15. "tempus. Nunc et enim interdum, commodo eros ac, pretium sapien. Pellentesque laoreet orci a nunc pharetra "
  16. "pharetra.";
  17. // 创建一个断词策略为 BREAK_ALL 的 TypographyStyle
  18. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  19. // 设置文本对齐方式为居中
  20. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  21. // 设置断词策略为 WORD_BREAK_TYPE_BREAK_ALL
  22. OH_Drawing_SetTypographyTextWordBreakType(typoStyle, OH_Drawing_WordBreakType::WORD_BREAK_TYPE_BREAK_ALL);
  23. // 设置最大行数为 10,行数大于 10 的部分不显示
  24. OH_Drawing_SetTypographyTextMaxLines(typoStyle, 10);
  25. // 使用之前创建的 FontCollection 和 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  26. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  27. // 将之前创建的 TextStyle 加入 handler
  28. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  29. // 将文本添加到 handler 中
  30. OH_Drawing_TypographyHandlerAddText(handler, text);
  31. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  32. // 设置页面最大宽度
  33. double maxWidth = width_;
  34. OH_Drawing_TypographyLayout(typography, maxWidth);
  35. // 将文本绘制到画布上
  36. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  37. // 释放内存
  38. OH_Drawing_DestroyFontCollection(fc);
  39. OH_Drawing_DestroyTextStyle(txtStyle);
  40. OH_Drawing_DestroyTypographyStyle(typoStyle);
  41. OH_Drawing_DestroyTypographyHandler(handler);
  42. OH_Drawing_DestroyTypography(typography);
展开
BREAK_ALL BREAK_WORD
展开
BREAK_HYPHEN(locale:未设置) BREAK_HYPHEN(locale:en-gb) BREAK_HYPHEN(locale:en-us)

多样式文本绘制与显示

除基本文字、排版属性之外,针对应用中不同文本的设计,开发者可能需要设置使用不同的绘制样式或能力,以凸显对应文本的独特表现或风格,此时可以结合使用多种绘制样式进行文本的渲染。

当前支持的多样式绘制及各绘制样式侧重效果如下:

  • 装饰线样式绘制: 主要通过不同的线条样式对文本进行装饰,可以使文本更加突出,富有表现力。

  • 字体特征绘制: 主要通过字体的变化,包括粗细、斜体等特征来改变文本的外观,增强文本的可读性和美观性。

  • 可变字体绘制: 对应提供文本在不同的显示环境和设备上灵活调整的能力,可满足更为精细的视觉效果。

  • 文本阴影绘制: 主要通过在文本周围添加阴影效果,以提升文本的层次感和立体感,从而使文本更具吸引力。

  • 占位符绘制: 可以在不确定文本内容时保持文本布局的稳定性,使得文本显示更为流畅和自然。

  • 自动间距绘制: 可以在一些字符混排切换的地方自动添加额外间距,提升阅读体验。

  • 渐变色绘制: 可以为文字提供颜色渐变效果,增强文字表现力。

  • 垂直对齐: 调整文本在垂直方向排版位置,提升排版质量。

  • 上下标: 可以将任意字符处理成上标或下标,更精准表达文本含义。

  • 高对比度文字绘制: 主要通过将深色文字变黑、浅色文字变白,增强文本的对比效果。

  • 行高调整: 调整行高可改变文本行的垂直间距,使行间距更松散或更紧凑,显著改善文本垂直截断问题,提高可读性。

  • 行间距调整: 通过调整行间距的方式可以实现行高调整一样的效果,优化阅读体验。

  • 省略号样式设置: 在文本内容超出显示区域时,可以使用省略号截断文本,支持头部、中部、尾部以及多行省略模式。

  • 文字换行方式设置: 文本排版时支持不同的断行策略,可根据场景选择合适的换行方式。

  • 行首标点压缩: 在排版中,通过开启行首标点压缩功能,将行首标点符号进行挤压处理,避免标点占用行首空间,提升排版紧凑度。

装饰线

装饰线是指在文本上方、下方或中间添加的装饰性线条,当前支持上划线、下划线、删除线。

可以通过添加文本装饰线,提升文本的视觉效果和可读性。

使用装饰线需要初始化装饰线样式对象,并添加到文本样式中,从而在文本绘制时生效。

展开
接口定义 描述
void OH_Drawing_SetTextStyleDecoration(OH_Drawing_TextStyle* style, int decoration) 设置指定文本样式中的装饰线类型,只能设置一个装饰线类型,添加多个需要使用OH_Drawing_AddTextStyleDecoration。
void OH_Drawing_SetTextStyleDecorationStyle(OH_Drawing_TextStyle* style, int decorationStyle) 设置指定文本样式中的装饰线样式。
void OH_Drawing_SetTextStyleDecorationColor(OH_Drawing_TextStyle* style, uint32_t color) 设置指定文本样式中的装饰线颜色。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个TypographyStyle创建Typography时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置文本对齐方式为居中
  4. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  5. // 设置文本内容
  6. const char *text = "Hello World Drawing\n";
  7. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  8. OH_Drawing_TextStyle *txtStyleWithDeco = OH_Drawing_CreateTextStyle();
  9. OH_Drawing_SetTextStyleColor(txtStyleWithDeco, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. OH_Drawing_SetTextStyleFontSize(txtStyleWithDeco, DIV_TEN(width_));
  11. OH_Drawing_SetTextStyleFontWeight(txtStyleWithDeco, FONT_WEIGHT_400);
  12. // 设置装饰线为 LINE_THROUGH
  13. OH_Drawing_SetTextStyleDecoration(txtStyleWithDeco, TEXT_DECORATION_LINE_THROUGH);
  14. // 设置装饰线样式为 WAVY
  15. OH_Drawing_SetTextStyleDecorationStyle(txtStyleWithDeco, TEXT_DECORATION_STYLE_WAVY);
  16. // 设置装饰线颜色
  17. OH_Drawing_SetTextStyleDecorationColor(txtStyleWithDeco, OH_Drawing_ColorSetArgb(0xFF, 0x6F, 0xFF, 0xFF));
  18. // 创建一个不带装饰线的 TextStyle 用于对比
  19. OH_Drawing_TextStyle *txtStyleNoDeco = OH_Drawing_CreateTextStyle();
  20. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  21. OH_Drawing_SetTextStyleColor(txtStyleNoDeco, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  22. OH_Drawing_SetTextStyleFontSize(txtStyleNoDeco, DIV_TEN(width_));
  23. OH_Drawing_SetTextStyleFontWeight(txtStyleNoDeco, FONT_WEIGHT_400);
  24. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  25. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  26. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  27. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  28. // 加入带有装饰线的文本样式
  29. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithDeco);
  30. // 将文本添加到 handler 中
  31. OH_Drawing_TypographyHandlerAddText(handler, text);
  32. // 后续加入的不带装饰线的文本样式
  33. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoDeco);
  34. // 将文本添加到 handler 中
  35. OH_Drawing_TypographyHandlerAddText(handler, text);
  36. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  37. // 设置页面最大宽度
  38. double maxWidth = width_;
  39. OH_Drawing_TypographyLayout(typography, maxWidth);
  40. // 将文本绘制到画布上
  41. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  42. // 释放内存
  43. OH_Drawing_DestroyTypographyStyle(typoStyle);
  44. OH_Drawing_DestroyTextStyle(txtStyleWithDeco);
  45. OH_Drawing_DestroyTextStyle(txtStyleNoDeco);
  46. OH_Drawing_DestroyFontCollection(fc);
  47. OH_Drawing_DestroyTypographyHandler(handler);
  48. OH_Drawing_DestroyTypography(typography);

字体特征

字体特征绘制专注于在文本渲染过程中对字体特征(如粗体、斜体、字体变种等)的处理,允许字体在不同的排版场景下表现出不同的效果,可用于增强文本的表现力,使其更符合设计和阅读需求。

常见的FontFeature包含有liga、frac、case等,需要对应的ttf文件支持才能正常使能。

展开
接口定义 描述
void OH_Drawing_TextStyleAddFontFeature(OH_Drawing_TextStyle* style, const char* tag, int value) 设置文本样式中指定字体特征是否启用。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个 TypographyStyle,创建 TypographyCreate 时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置文本对齐方式为居中
  4. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  5. // 设置文本内容
  6. const char *text = "1/2 1/3 1/4\n";
  7. // 设置文字颜色、大小、字重,不设置TextStyle无法绘制出文本
  8. OH_Drawing_TextStyle *txtStyleWithFeature = OH_Drawing_CreateTextStyle();
  9. OH_Drawing_SetTextStyleColor(txtStyleWithFeature, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. OH_Drawing_SetTextStyleFontSize(txtStyleWithFeature, DIV_TEN(width_));
  11. OH_Drawing_SetTextStyleFontWeight(txtStyleWithFeature, FONT_WEIGHT_900);
  12. // 设置启用frac font feature,此功能将斜线分隔的数字替换为普通(对角线)分数。
  13. OH_Drawing_TextStyleAddFontFeature(txtStyleWithFeature, "frac", 1);
  14. // 创建一个不带字体特征的 TextStyle 用于对比
  15. OH_Drawing_TextStyle *txtStyleNoFeature = OH_Drawing_CreateTextStyle();
  16. // 设置文字颜色、大小、字重。不设置 TextStyle 无法绘制出文本
  17. OH_Drawing_SetTextStyleColor(txtStyleNoFeature, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  18. OH_Drawing_SetTextStyleFontSize(txtStyleNoFeature, DIV_TEN(width_));
  19. OH_Drawing_SetTextStyleFontWeight(txtStyleNoFeature, FONT_WEIGHT_900);
  20. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  21. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  22. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  23. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  24. // 加入带有字体特征的文本样式
  25. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithFeature);
  26. // 将文本添加到 handler 中
  27. OH_Drawing_TypographyHandlerAddText(handler, text);
  28. // 弹出之前添加的 TextStyle
  29. OH_Drawing_TypographyHandlerPopTextStyle(handler);
  30. // 后续加入的不带字体特征的文本样式
  31. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoFeature);
  32. // 将文本添加到 handler 中
  33. OH_Drawing_TypographyHandlerAddText(handler, text);
  34. // 弹出之前添加的 TextStyle
  35. OH_Drawing_TypographyHandlerPopTextStyle(handler);
  36. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  37. // 设置页面最大宽度
  38. double maxWidth = width_;
  39. OH_Drawing_TypographyLayout(typography, maxWidth);
  40. // 将文本绘制到画布上
  41. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  42. // 释放内存
  43. OH_Drawing_DestroyTypographyStyle(typoStyle);
  44. OH_Drawing_DestroyTextStyle(txtStyleWithFeature);
  45. OH_Drawing_DestroyTextStyle(txtStyleNoFeature);
  46. OH_Drawing_DestroyFontCollection(fc);
  47. OH_Drawing_DestroyTypographyHandler(handler);
  48. OH_Drawing_DestroyTypography(typography);

可变字体

可变字体是一种在一个字体文件中包含多个字形变体的字体格式,允许在一个字体文件内灵活地调整字体的各种属性(如字重、字宽、斜体等)。

与传统字体文件(每种变体需要一个独立的文件)不同,可变字体在一个字体文件中包含多个变体轴,可通过使用可变字体实现文本渲染绘制时的平滑过渡。

展开
接口定义 描述
void OH_Drawing_TextStyleAddFontVariation(OH_Drawing_TextStyle* style, const char* axis, const float value) 添加可变字体属性。对应的字体文件(.ttf文件)需要支持可变调节,此接口才能生效。当对应的字体不支持可变调节时,此接口调用不生效。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个 TypographyStyle 创建 Typography 时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置文本对齐方式为居中
  4. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  5. // 设置文字内容
  6. const char *text = "Hello World Drawing\n";
  7. OH_Drawing_TextStyle *txtStyleWithVar = OH_Drawing_CreateTextStyle();
  8. // 设置可变字体的字重为800,在字体文件支持的情况下,还可以设置"slnt", "wdth"
  9. OH_Drawing_TextStyleAddFontVariation(txtStyleWithVar, "wght", 800);
  10. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  11. OH_Drawing_SetTextStyleColor(txtStyleWithVar, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  12. OH_Drawing_SetTextStyleFontSize(txtStyleWithVar, DIV_TEN(width_));
  13. // 此处设置字重不生效,将被可变字体的字重覆盖
  14. OH_Drawing_SetTextStyleFontWeight(txtStyleWithVar, FONT_WEIGHT_400);
  15. // 创建一个不带可变字体的 TextStyle 用于对比
  16. OH_Drawing_TextStyle *txtStyleNoVar = OH_Drawing_CreateTextStyle();
  17. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  18. OH_Drawing_SetTextStyleColor(txtStyleNoVar, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  19. OH_Drawing_SetTextStyleFontSize(txtStyleNoVar, DIV_TEN(width_));
  20. OH_Drawing_SetTextStyleFontWeight(txtStyleNoVar, FONT_WEIGHT_400);
  21. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  22. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  23. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  24. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  25. // 加入带有可变字体的文本样式
  26. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithVar);
  27. // 将文本添加到 handler 中
  28. OH_Drawing_TypographyHandlerAddText(handler, text);
  29. // 弹出之前创建的 TextStyle
  30. OH_Drawing_TypographyHandlerPopTextStyle(handler);
  31. // 后续加入的不带可变字体的文本样式
  32. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoVar);
  33. // 将文本添加到 handler 中
  34. OH_Drawing_TypographyHandlerAddText(handler, text);
  35. // 弹出之前创建的 TextStyle
  36. OH_Drawing_TypographyHandlerPopTextStyle(handler);
  37. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  38. // 设置页面最大宽度
  39. double maxWidth = width_;
  40. OH_Drawing_TypographyLayout(typography, maxWidth);
  41. // 将文本绘制到画布上
  42. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  43. // 释放内存
  44. OH_Drawing_DestroyTypographyStyle(typoStyle);
  45. OH_Drawing_DestroyTextStyle(txtStyleWithVar);
  46. OH_Drawing_DestroyTextStyle(txtStyleNoVar);
  47. OH_Drawing_DestroyFontCollection(fc);
  48. OH_Drawing_DestroyTypographyHandler(handler);
  49. OH_Drawing_DestroyTypography(typography);

文本阴影

文本阴影为文本提供了深度感,使得文本在背景上更具立体感。通常用于提升文本的视觉吸引力或增强可读性,尤其是在色彩对比度较低的场景下。

其中,文本阴影有三个属性,分别为阴影颜色color、阴影基于当前文本的偏移位置offset、阴影半径blurRadius。

使用阴影效果需要在文本样式中设置对应的阴影效果数组,从而在文本绘制时生效。

展开
接口定义 描述
OH_Drawing_Point* OH_Drawing_PointCreate(float x, float y) 用于创建一个坐标点对象。
OH_Drawing_TextShadow* OH_Drawing_CreateTextShadow(void) 创建指向文本阴影对象的指针。
void OH_Drawing_SetTextShadow(OH_Drawing_TextShadow* shadow, uint32_t color, OH_Drawing_Point* offset, double blurRadius) 设置文本阴影对象的参数。
void OH_Drawing_TextStyleAddShadow(OH_Drawing_TextStyle* style, const OH_Drawing_TextShadow* shadow) 文本阴影容器中添加文本阴影元素。
void OH_Drawing_DestroyTextShadow(OH_Drawing_TextShadow* shadow) 释放被文本阴影对象占据的内存。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个 TypographyStyle 创建 Typography 时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置文本对齐方式为居中
  4. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  5. // 设置文本内容
  6. const char *text = "Hello World Drawing\n";
  7. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  8. OH_Drawing_TextStyle *txtStyleWithShadow = OH_Drawing_CreateTextStyle();
  9. OH_Drawing_SetTextStyleColor(txtStyleWithShadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. OH_Drawing_SetTextStyleFontSize(txtStyleWithShadow, DIV_TEN(width_));
  11. OH_Drawing_SetTextStyleFontWeight(txtStyleWithShadow, FONT_WEIGHT_400);
  12. // 设置阴影偏移量
  13. OH_Drawing_Point *offset = OH_Drawing_PointCreate(1, 1);
  14. OH_Drawing_TextShadow *shadow = OH_Drawing_CreateTextShadow();
  15. double radius = 10.0;
  16. // 为 TextShadow 设置样式
  17. OH_Drawing_SetTextShadow(shadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00), offset, radius);
  18. // 将 TextShadow 加入 TextStyle
  19. OH_Drawing_TextStyleAddShadow(txtStyleWithShadow, shadow);
  20. // 创建一个不带阴影的 TextStyle 用于对比
  21. OH_Drawing_TextStyle *txtStyleNoShadow = OH_Drawing_CreateTextStyle();
  22. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  23. OH_Drawing_SetTextStyleColor(txtStyleNoShadow, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  24. OH_Drawing_SetTextStyleFontSize(txtStyleNoShadow, DIV_TEN(width_));
  25. OH_Drawing_SetTextStyleFontWeight(txtStyleNoShadow, FONT_WEIGHT_400);
  26. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  27. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  28. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  29. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  30. // 加入带有阴影的文本样式
  31. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleWithShadow);
  32. // 将文本添加到 handler 中
  33. OH_Drawing_TypographyHandlerAddText(handler, text);
  34. // 后续加入的不带阴影的文本样式
  35. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyleNoShadow);
  36. // 将文本添加到 handler 中
  37. OH_Drawing_TypographyHandlerAddText(handler, text);
  38. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  39. // 设置页面最大宽度
  40. double maxWidth = width_;
  41. OH_Drawing_TypographyLayout(typography, maxWidth);
  42. // 将文本绘制到画布上
  43. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  44. // 释放内存
  45. OH_Drawing_DestroyTypographyStyle(typoStyle);
  46. OH_Drawing_DestroyTextStyle(txtStyleWithShadow);
  47. OH_Drawing_PointDestroy(offset);
  48. OH_Drawing_DestroyTextShadow(shadow);
  49. OH_Drawing_DestroyTextStyle(txtStyleNoShadow);
  50. OH_Drawing_DestroyFontCollection(fc);
  51. OH_Drawing_DestroyTypographyHandler(handler);
  52. OH_Drawing_DestroyTypography(typography);

占位符

占位符绘制用于处理文本中占位符符号的渲染。

占位符也是用来实现图文混排的关键,是指在实际图像或内容注册之前,用来预先提供或替代某个位置的视觉元素。

展开
接口定义 描述
void OH_Drawing_TypographyHandlerAddPlaceholder(OH_Drawing_TypographyCreate* handler, OH_Drawing_PlaceholderSpan* span) 设置占位符。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 设置页面最大宽度
  2. double maxWidth = width_;
  3. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  4. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  5. // 设置文字颜色、大小、字重,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  6. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  7. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  8. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  9. OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400);
  10. // 设置文本内容
  11. const char *text = "Hello World Drawing\n";
  12. // 创建一个 TypographyStyle 创建 Typography 时需要使用
  13. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  14. // 设置文本对齐方式为居中
  15. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  16. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate。TypographyCreate 用于创建 Typography
  17. OH_Drawing_TypographyCreate *handlerWithPlaceholder = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  18. // 创建一个 placeholder,并且初始化其成员变量
  19. OH_Drawing_PlaceholderSpan placeholder;
  20. placeholder.width = DIV_TEN(width_);
  21. placeholder.height = DIV_FIVE(width_);
  22. placeholder.alignment = ALIGNMENT_ABOVE_BASELINE; // 基线对齐策略
  23. placeholder.baseline = TEXT_BASELINE_ALPHABETIC; // 使用的文本基线类型
  24. placeholder.baselineOffset = 0.0; // 相比基线的偏移量。只有对齐策略是 OFFSET_AT_BASELINE 时生效
  25. // 将 placeholder 放在开头
  26. OH_Drawing_TypographyHandlerAddPlaceholder(handlerWithPlaceholder, &placeholder);
  27. // 将之前创建的 TextStyle 加入 handler
  28. OH_Drawing_TypographyHandlerPushTextStyle(handlerWithPlaceholder, txtStyle);
  29. // 将文本添加到 handler 中
  30. OH_Drawing_TypographyHandlerAddText(handlerWithPlaceholder, text);
  31. OH_Drawing_Typography *typographyWithPlaceholder = OH_Drawing_CreateTypography(handlerWithPlaceholder);
  32. OH_Drawing_TypographyLayout(typographyWithPlaceholder, maxWidth);
  33. // 将文本绘制到画布上
  34. OH_Drawing_TypographyPaint(typographyWithPlaceholder, cCanvas_, 0, DIV_TEN(width_));
  35. // 创建 OH_Drawing_TypographyCreate
  36. OH_Drawing_TypographyCreate *handlerNoPlaceholder = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  37. // 将之前创建的 TextStyle 加入 handler
  38. OH_Drawing_TypographyHandlerPushTextStyle(handlerNoPlaceholder, txtStyle);
  39. // 将文本添加到 handler 中
  40. OH_Drawing_TypographyHandlerAddText(handlerNoPlaceholder, text);
  41. OH_Drawing_Typography *typographyNoPlaceholder = OH_Drawing_CreateTypography(handlerNoPlaceholder);
  42. OH_Drawing_TypographyLayout(typographyNoPlaceholder, maxWidth);
  43. // 将文本绘制到画布上
  44. OH_Drawing_TypographyPaint(typographyNoPlaceholder, cCanvas_, 0, DIV_TWO(width_));
  45. // 释放内存
  46. OH_Drawing_DestroyFontCollection(fc);
  47. OH_Drawing_DestroyTextStyle(txtStyle);
  48. OH_Drawing_DestroyTypographyStyle(typoStyle);
  49. OH_Drawing_DestroyTypographyHandler(handlerWithPlaceholder);
  50. OH_Drawing_DestroyTypographyHandler(handlerNoPlaceholder);
  51. OH_Drawing_DestroyTypography(typographyWithPlaceholder);
  52. OH_Drawing_DestroyTypography(typographyNoPlaceholder);

自动间距

使能自动间距,则会在文本排版时自动调整CJK(中文字符、日文字符、韩文字符)与西文(拉丁字母、西里尔字母、希腊字母)、CJK与数字、CJK与版权符号、版权符号与数字、版权符号与西文之间的间距。例如,在中英文混排场景中,使能自动间距即可在中英文切换的地方自动添加额外间距,提升阅读体验。

展开
接口定义 描述
void OH_Drawing_SetTypographyTextAutoSpace(OH_Drawing_TypographyStyle *style, bool enableAutoSpace) 设置文本排版时是否使能自动间距。默认不使能自动间距,一旦使能则会自动调整CJK(中文字符、日文字符、韩文字符)与西文(拉丁字母、西里尔字母、希腊字母)、CJK与数字、CJK与版权符号、版权符号与数字、版权符号与西文之间的间距。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个TypographyStyle创建Typography时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置使能自动间距,默认为false
  4. OH_Drawing_SetTypographyTextAutoSpace(typoStyle, true);
  5. // 设置文字内容
  6. const char *text = "test测试©test©测。";
  7. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  8. // 设置文字颜色、大小、字重,不设置TextStyle会使用TypographyStyle中的默认TextStyle
  9. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  11. // 创建FontCollection,FontCollection用于管理字体匹配逻辑
  12. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  13. // 使用FontCollection和之前创建的TypographyStyle创建TypographyCreate。TypographyCreate用于创建Typography
  14. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  15. // 将文本样式添加到handler中
  16. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  17. // 将文本添加到handler中
  18. OH_Drawing_TypographyHandlerAddText(handler, text);
  19. // 创建段落
  20. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  21. // 设置页面最大宽度
  22. double maxWidth = width_;
  23. // 将段落按照排版宽度进行排版
  24. OH_Drawing_TypographyLayout(typography, maxWidth);
  25. // 将文本绘制到画布上
  26. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  27. // 设置使能自动间距,用于对比
  28. OH_Drawing_SetTypographyTextAutoSpace(typoStyle, false);
  29. // 使用FontCollection和之前创建的TypographyStyle创建TypographyCreate。TypographyCreate用于创建Typography
  30. OH_Drawing_TypographyCreate *handlerWithoutAutoSpace = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  31. // 将文本样式添加到handlerWithoutAutoSpace中
  32. OH_Drawing_TypographyHandlerPushTextStyle(handlerWithoutAutoSpace, txtStyle);
  33. // 将文本添加到handlerWithoutAutoSpace中
  34. OH_Drawing_TypographyHandlerAddText(handlerWithoutAutoSpace, text);
  35. // 创建段落
  36. OH_Drawing_Typography *typographyWithoutAutoSpace = OH_Drawing_CreateTypography(handlerWithoutAutoSpace);
  37. // 将段落按照排版宽度进行排版
  38. OH_Drawing_TypographyLayout(typographyWithoutAutoSpace, maxWidth);
  39. // 将文本绘制到画布上
  40. OH_Drawing_TypographyPaint(typographyWithoutAutoSpace, cCanvas_, 0, DIV_FOUR(width_));
  41. // 释放内存
  42. OH_Drawing_DestroyTypographyStyle(typoStyle);
  43. OH_Drawing_DestroyTextStyle(txtStyle);
  44. OH_Drawing_DestroyFontCollection(fc);
  45. OH_Drawing_DestroyTypographyHandler(handler);
  46. OH_Drawing_DestroyTypographyHandler(handlerWithoutAutoSpace);
  47. OH_Drawing_DestroyTypography(typography);
  48. OH_Drawing_DestroyTypography(typographyWithoutAutoSpace);
展开
段落样式设置(自动间距) 示意效果
不使能自动间距
使能自动间距

渐变色

渐变色是一种在文字设计中广泛应用的视觉效果,通过在文字的不同部分应用不同的颜色,从而创造出从一种颜色平滑过渡到另一种颜色的效果。可以通过着色器实现文字渐变的效果,着色器的更多介绍请参考着色器效果。

展开
接口定义 描述
void OH_Drawing_SetTextStyleForegroundBrush(OH_Drawing_TextStyle* style, OH_Drawing_Brush* foregroundBrush) 添加前景画刷,渐变着色器属性依附于前景画刷中。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  3. // 设置文字大小
  4. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  5. // 创建着色器对象,并设置颜色、变化起始点与结束点
  6. OH_Drawing_Point *startPt = OH_Drawing_PointCreate(0, 0);
  7. // 结束点位于(900, 900)
  8. OH_Drawing_Point *endPt = OH_Drawing_PointCreate(900, 900);
  9. uint32_t colors[] = {0xFFFFFF00, 0xFFFF0000, 0xFF0000FF};
  10. float pos[] = {0.0f, 0.5f, 1.0f};
  11. // pos数组长度为3
  12. OH_Drawing_ShaderEffect *colorShaderEffect =
  13. OH_Drawing_ShaderEffectCreateLinearGradient(startPt, endPt, colors, pos, 3, OH_Drawing_TileMode::CLAMP);
  14. // 创建画刷对象,并将着色器添加到画刷
  15. OH_Drawing_Brush *brush = OH_Drawing_BrushCreate();
  16. OH_Drawing_BrushSetShaderEffect(brush, colorShaderEffect);
  17. // 将画刷添加到文本样式中
  18. OH_Drawing_SetTextStyleForegroundBrush(txtStyle, brush);
  19. // 创建排版对象,并绘制
  20. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  21. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  22. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  23. const char *text = "Hello World";
  24. OH_Drawing_TypographyHandlerAddText(handler, text);
  25. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  26. // 设置页面最大宽度
  27. double maxWidth = width_;
  28. // 将段落按照排版宽度进行排版
  29. OH_Drawing_TypographyLayout(typography, maxWidth);
  30. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  31. // 释放对象
  32. OH_Drawing_PointDestroy(startPt);
  33. OH_Drawing_PointDestroy(endPt);
  34. OH_Drawing_DestroyFontCollection(fc);
  35. OH_Drawing_ShaderEffectDestroy(colorShaderEffect);
  36. OH_Drawing_BrushDestroy(brush);
  37. OH_Drawing_DestroyTextStyle(txtStyle);
  38. OH_Drawing_DestroyTypographyStyle(typoStyle);
  39. OH_Drawing_DestroyTypographyHandler(handler);
  40. OH_Drawing_DestroyTypography(typography);

垂直对齐

垂直对齐用于调整文本在一行中垂直方向的排版位置。开启行高缩放或行内存在不同字号文本混排时使能垂直对齐,可以让文本实现顶部对齐、居中对齐、底部对齐或基线对齐(默认)。

展开
接口定义 描述
void OH_Drawing_SetTypographyVerticalAlignment(OH_Drawing_TypographyStyle* style, OH_Drawing_TextVerticalAlignment align) 设置文本垂直方向排版方式。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  3. // 设置垂直对齐方式
  4. OH_Drawing_SetTypographyVerticalAlignment(typoStyle,
  5. OH_Drawing_TextVerticalAlignment::TEXT_VERTICAL_ALIGNMENT_CENTER);
  6. // 设置文字大小
  7. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  8. // 设置文字颜色
  9. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. // 创建排版对象,并绘制
  11. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  12. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  13. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  14. const char *text = "VerticalAlignment-center";
  15. OH_Drawing_TypographyHandlerAddText(handler, text);
  16. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  17. // 设置页面最大宽度
  18. double maxWidth = width_;
  19. // 将段落按照排版宽度进行排版
  20. OH_Drawing_TypographyLayout(typography, maxWidth);
  21. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  22. // 释放对象
  23. OH_Drawing_DestroyFontCollection(fc);
  24. OH_Drawing_DestroyTextStyle(txtStyle);
  25. OH_Drawing_DestroyTypographyStyle(typoStyle);
  26. OH_Drawing_DestroyTypographyHandler(handler);
  27. OH_Drawing_DestroyTypography(typography);

效果如下(黑框仅为展示文本绘制区域,实际不绘制):

上下标

上下标能将文本作为上标或下标参与排版。一般用于数学公式、化学式等场景。

展开
接口定义 描述
void OH_Drawing_SetTextStyleBadgeType(OH_Drawing_TextStyle* style, OH_Drawing_TextBadgeType textBadgeType) 使能上下标样式。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  3. OH_Drawing_TextStyle *badgeTxtStyle = OH_Drawing_CreateTextStyle();
  4. // 设置文字大小
  5. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TWENTY(width_));
  6. OH_Drawing_SetTextStyleFontSize(badgeTxtStyle, DIV_TWENTY(width_));
  7. // 设置文字颜色
  8. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  9. OH_Drawing_SetTextStyleColor(badgeTxtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  10. // 使能文本上标
  11. OH_Drawing_SetTextStyleBadgeType(badgeTxtStyle, OH_Drawing_TextBadgeType::TEXT_SUPERSCRIPT);
  12. // 创建排版对象,并绘制
  13. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  14. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  15. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  16. const char *text = "Mass-energy equivalence: E=mc";
  17. OH_Drawing_TypographyHandlerAddText(handler, text);
  18. OH_Drawing_TypographyHandlerPushTextStyle(handler, badgeTxtStyle);
  19. const char *badgeText = "2";
  20. OH_Drawing_TypographyHandlerAddText(handler, badgeText);
  21. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  22. // 设置页面最大宽度
  23. double maxWidth = width_;
  24. // 将段落按照排版宽度进行排版
  25. OH_Drawing_TypographyLayout(typography, maxWidth);
  26. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  27. // 释放对象
  28. OH_Drawing_DestroyFontCollection(fc);
  29. OH_Drawing_DestroyTextStyle(txtStyle);
  30. OH_Drawing_DestroyTextStyle(badgeTxtStyle);
  31. OH_Drawing_DestroyTypographyStyle(typoStyle);
  32. OH_Drawing_DestroyTypographyHandler(handler);
  33. OH_Drawing_DestroyTypography(typography);

高对比度

高对比度可将深色文字变黑、浅色文字变白。开发者可选择开启或关闭应用的高对比度文字渲染,或遵循系统设置中的高对比度文字配置。

展开
接口定义 描述
void OH_Drawing_SetTextHighContrast(OH_Drawing_TextHighContrast action) 设置文字渲染高对比度模式。模式具体可参考OH_Drawing_TextHighContrast。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 开启APP的文字渲染高对比模式,该模式的优先级要高于系统设置中的高对比度文字配置
  2. OH_Drawing_SetTextHighContrast(TEXT_APP_ENABLE_HIGH_CONTRAST);
  3. // 创建一个 TypographyStyle,创建 Typography 时需要使用
  4. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  5. // 设置文字颜色、大小,不设置 TextStyle 会使用 TypographyStyle 中的默认 TextStyle
  6. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  7. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x6F, 0xFF, 0xFF));
  8. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  9. // 创建 FontCollection,FontCollection 用于管理字体匹配逻辑
  10. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  11. // 使用 FontCollection 和 之前创建的 TypographyStyle 创建 TypographyCreate
  12. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  13. // 将之前创建的 TextStyle 加入 handler 中
  14. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  15. // 设置文本内容,并将文本添加到 handler 中
  16. const char *text = "Hello World Drawing\n";
  17. OH_Drawing_TypographyHandlerAddText(handler, text);
  18. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  19. // 设置页面最大宽度
  20. double maxWidth = width_;
  21. // 将段落按照排版宽度进行排版
  22. OH_Drawing_TypographyLayout(typography, maxWidth);
  23. // 将文本绘制到画布上
  24. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  25. // 释放内存
  26. OH_Drawing_DestroyTypographyStyle(typoStyle);
  27. OH_Drawing_DestroyTextStyle(txtStyle);
  28. OH_Drawing_DestroyFontCollection(fc);
  29. OH_Drawing_DestroyTypographyHandler(handler);
  30. OH_Drawing_DestroyTypography(typography);
展开
高对比度设置 示意效果
不开启高对比度
开启高对比度

行高调整

调整行高可以改变文本行的垂直间距,行间距将变得更松散或更紧凑,可以显著改善文本垂直方向截断问题,使文本更易读。

当前行高调整方式包括两种:设置行高上限/下限和使用行高缩放系数。

行高调整(方式一)

从API version 21开始,支持为文本行设置行高上限与下限。

展开
接口定义 描述
OH_Drawing_ErrorCode OH_Drawing_SetTextStyleAttributeDouble(OH_Drawing_TextStyle* style, OH_Drawing_TextStyleAttributeId id, double value) 传入id为OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_D_LINE_HEIGHT_MAXIMUM,设置行高上限。
OH_Drawing_ErrorCode OH_Drawing_SetTextStyleAttributeDouble(OH_Drawing_TextStyle* style, OH_Drawing_TextStyleAttributeId id, double value) 传入id为OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_D_LINE_HEIGHT_MINIMUM,设置行高下限。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  3. // 设置文字大小为50
  4. OH_Drawing_SetTextStyleFontSize(txtStyle, 50);
  5. // 设置文字颜色
  6. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  7. OH_Drawing_SetTextStyleAttributeDouble(txtStyle,
  8. OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_D_LINE_HEIGHT_MAXIMUM, 65); // 设置行高上限为65
  9. OH_Drawing_SetTextStyleAttributeDouble(txtStyle,
  10. OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_D_LINE_HEIGHT_MINIMUM, 65); // 设置行高下限为65
  11. // 创建排版对象,并绘制
  12. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  13. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  14. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  15. const char *text = "Hello World!";
  16. OH_Drawing_TypographyHandlerAddText(handler, text);
  17. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  18. // 排版宽度为1000
  19. OH_Drawing_TypographyLayout(typography, 1000);
  20. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, 0);
  21. // 释放对象
  22. OH_Drawing_DestroyFontCollection(fc);
  23. OH_Drawing_DestroyTextStyle(txtStyle);
  24. OH_Drawing_DestroyTypographyStyle(typoStyle);
  25. OH_Drawing_DestroyTypographyHandler(handler);
  26. OH_Drawing_DestroyTypography(typography);

具体效果如下所示:

展开
行高上限值 行高下限值 示意效果(黑框仅为展示文本绘制区域,实际不绘制)
65 65
200 200

行高调整(方式二)

设置行高缩放系数。

展开
接口定义 描述
void OH_Drawing_SetTextStyleFontHeight(OH_Drawing_TextStyle* style, double fontHeight) 使能行高缩放。
OH_Drawing_ErrorCode OH_Drawing_SetTextStyleAttributeInt(OH_Drawing_TextStyle* style, OH_Drawing_TextStyleAttributeId id, int value) 传入id为OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_I_LINE_HEIGHT_STYLE,使能行高缩放样式。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  3. // 设置文字大小为50
  4. OH_Drawing_SetTextStyleFontSize(txtStyle, 50);
  5. // 设置文字颜色
  6. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  7. // 设置行高缩放系数为1.5
  8. OH_Drawing_SetTextStyleFontHeight(txtStyle, 1.5);
  9. // 设置行高缩放样式(1代表行高缩放以字形高度作为缩放基数)
  10. OH_Drawing_SetTextStyleAttributeInt(txtStyle,
  11. OH_Drawing_TextStyleAttributeId::TEXT_STYLE_ATTR_I_LINE_HEIGHT_STYLE, 1);
  12. // 创建排版对象,并绘制
  13. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  14. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  15. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  16. const char *text = "Hello World!";
  17. OH_Drawing_TypographyHandlerAddText(handler, text);
  18. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  19. // 排版宽度为1000
  20. OH_Drawing_TypographyLayout(typography, 1000);
  21. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, 0);
  22. // 释放对象
  23. OH_Drawing_DestroyFontCollection(fc);
  24. OH_Drawing_DestroyTextStyle(txtStyle);
  25. OH_Drawing_DestroyTypographyStyle(typoStyle);
  26. OH_Drawing_DestroyTypographyHandler(handler);
  27. OH_Drawing_DestroyTypography(typography);

具体效果如下所示:

展开
行高缩放样式 示意效果(黑框仅为展示文本绘制区域,实际不绘制)
TEXT_LINE_HEIGHT_BY_FONT_SIZE
TEXT_LINE_HEIGHT_BY_FONT_HEIGHT

行间距调整

从API version 21开始,支持设置行间距可以改善文本行之间的距离,提高阅读体验。

展开
接口定义 描述
OH_Drawing_ErrorCode OH_Drawing_SetTypographyStyleAttributeDouble(OH_Drawing_TypographyStyle* style, OH_Drawing_TypographyStyleAttributeId id, double value) 传入id为OH_Drawing_TypographyStyleAttributeId::TYPOGRAPHY_STYLE_ATTR_D_LINE_SPACING,设置行间距。

示例及效果如下所示:

收起
自动换行
深色代码主题
复制
  1. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  2. OH_Drawing_SetTypographyStyleAttributeDouble(typoStyle,
  3. OH_Drawing_TypographyStyleAttributeId::TYPOGRAPHY_STYLE_ATTR_D_LINE_SPACING, 100); // 设置行间距为100
  4. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  5. // 设置文字大小为50
  6. OH_Drawing_SetTextStyleFontSize(txtStyle, 50);
  7. // 设置文字颜色
  8. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  9. // 创建排版对象,并绘制
  10. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  11. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  12. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  13. const char *text = "Hello World!";
  14. OH_Drawing_TypographyHandlerAddText(handler, text);
  15. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  16. // 排版宽度为200
  17. OH_Drawing_TypographyLayout(typography, 200);
  18. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, 0);
  19. // 释放对象
  20. OH_Drawing_DestroyFontCollection(fc);
  21. OH_Drawing_DestroyTextStyle(txtStyle);
  22. OH_Drawing_DestroyTypographyStyle(typoStyle);
  23. OH_Drawing_DestroyTypographyHandler(handler);
  24. OH_Drawing_DestroyTypography(typography);

具体效果如下所示:

展开
行间距 上升部下降部开关 示意效果(黑框仅为展示文本绘制区域,实际不绘制)
0 TEXT_HEIGHT_ALL
100 TEXT_HEIGHT_ALL
100 TEXT_HEIGHT_DISABLE_ALL

省略号样式设置

从API version 22开始,支持设置省略号样式,在文本内容超出显示区域时截断文本。从API version 24开始,支持多行省略模式。

使用OH_Drawing_SetTypographyStyleAttributeInt接口,传入TYPOGRAPHY_STYLE_ATTR_I_ELLIPSIS_MODAL设置省略号模式,可选的省略号模式可见OH_Drawing_EllipsisModal。

收起
自动换行
深色代码主题
复制
  1. // 创建一个带有省略号设置的 TypographyStyle
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置最大行数为2,超过2行的部分将被省略
  4. OH_Drawing_SetTypographyTextMaxLines(typoStyle, 2);
  5. // 设置省略号模式为尾部省略
  6. OH_Drawing_SetTypographyStyleAttributeInt(typoStyle,
  7. OH_Drawing_TypographyStyleAttributeId::TYPOGRAPHY_STYLE_ATTR_I_ELLIPSIS_MODAL, ELLIPSIS_MODAL_TAIL);
  8. // 设置自定义省略号字符串
  9. OH_Drawing_SetTypographyTextEllipsis(typoStyle, "...");
展开
省略号模式 效果
ELLIPSIS_MODAL_TAIL
ELLIPSIS_MODAL_HEAD
ELLIPSIS_MODAL_MIDDLE
ELLIPSIS_MODAL_MULTILINE_HEAD
ELLIPSIS_MODAL_MULTILINE_MIDDLE

文字换行方式设置

从API version 22开始,支持在文本排版时设置断行策略,断行策略决定了文本如何在行尾进行换行处理。

使用OH_Drawing_SetTypographyTextBreakStrategy接口设置断行策略,可选的断行策略可见OH_Drawing_BreakStrategy。

收起
自动换行
深色代码主题
复制
  1. // 创建一个设置了均衡断行策略的 TypographyStyle
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 设置断行策略为 BALANCED(均衡策略)
  4. OH_Drawing_SetTypographyTextBreakStrategy(typoStyle, BREAK_STRATEGY_BALANCED);
展开
换行方式 效果
GREEDY
HIGH_QUALITY
BALANCED

行首标点压缩

从API version 23开始,在文本排版中支持行首标点压缩功能。通过启用行首标点压缩功能,可以将行首标点符号进行挤压处理,提升排版紧凑度。

使用OH_Drawing_SetTypographyStyleAttributeBool接口,传入TYPOGRAPHY_STYLE_ATTR_B_COMPRESS_HEAD_PUNCTUATION设置是否启用行首标点压缩,使用OH_Drawing_GetTypographyStyleAttributeBool接口查询是否启用了行首标点压缩。

收起
自动换行
深色代码主题
复制
  1. // 第二段:开启行首标点压缩
  2. OH_Drawing_TypographyStyle *typoStyleCompress = OH_Drawing_CreateTypographyStyle();
  3. OH_Drawing_SetTypographyTextAlign(typoStyleCompress, TEXT_ALIGN_LEFT);
  4. OH_Drawing_ErrorCode errorCode = OH_Drawing_SetTypographyStyleAttributeBool(typoStyleCompress,
  5. OH_Drawing_TypographyStyleAttributeId::TYPOGRAPHY_STYLE_ATTR_B_COMPRESS_HEAD_PUNCTUATION, true);
  6. if (errorCode != OH_DRAWING_SUCCESS) {
  7. DRAWING_LOGE("SetTypographyStyleAttributeBool failed, errorCode: %{public}d", errorCode);
  8. }
展开
是否开启行首标点压缩 效果
关闭行首标点压缩
开启行首标点压缩

样式的拷贝、绘制与显示

支持拷贝文本样式、段落样式、阴影样式,以便快速复制相关样式作用到不同文字上。

展开
接口定义 描述
OH_Drawing_TypographyStyle* OH_Drawing_CopyTypographyStyle(OH_Drawing_TypographyStyle* style) 创建一个段落样式的对象副本,用于拷贝一个已有的段落样式对象。
OH_Drawing_TextStyle* OH_Drawing_CopyTextStyle(OH_Drawing_TextStyle* style) 创建一个文本样式的对象副本,用于拷贝一个已有的文本样式对象。
OH_Drawing_TextShadow* OH_Drawing_CopyTextShadow(OH_Drawing_TextShadow* shadow) 创建一个文本阴影的对象副本,用于拷贝一个已有的文本阴影对象。

示例及示意效果如下所示:

收起
自动换行
深色代码主题
复制
  1. // 创建一个TypographyStyle,其中创建Typography时需要使用
  2. OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
  3. // 配置段落样式包括:使能自动间距、最大行数、省略号样式、省略号文本、对齐方式
  4. // 使能自动间距
  5. OH_Drawing_SetTypographyTextAutoSpace(typoStyle, true);
  6. // 设置段落最大行数为3行
  7. OH_Drawing_SetTypographyTextMaxLines(typoStyle, 3);
  8. // 设置省略号模式为尾部省略号
  9. OH_Drawing_SetTypographyStyleAttributeInt(typoStyle, TYPOGRAPHY_STYLE_ATTR_I_ELLIPSIS_MODAL, ELLIPSIS_MODAL_TAIL);
  10. // 设置省略号文本
  11. OH_Drawing_SetTypographyTextEllipsis(typoStyle, "...");
  12. // 设置对齐方式为居中对齐
  13. OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_CENTER);
  14. OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
  15. // 设置文字颜色、大小、字重,不设置TextStyle会使用TypographyStyle中的默认TextStyle
  16. OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0x00));
  17. OH_Drawing_SetTextStyleFontSize(txtStyle, DIV_TEN(width_));
  18. // 设置文本的装饰线
  19. // 添加下划线
  20. OH_Drawing_SetTextStyleDecoration(txtStyle, TEXT_DECORATION_UNDERLINE);
  21. // 设置装饰线样式为波浪线样式
  22. OH_Drawing_SetTextStyleDecorationStyle(txtStyle, TEXT_DECORATION_STYLE_WAVY);
  23. // 设置下划线粗细
  24. OH_Drawing_SetTextStyleDecorationThicknessScale(txtStyle, 1);
  25. // 设置下划线颜色为蓝色
  26. OH_Drawing_SetTextStyleDecorationColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0x00, 0xFF));
  27. // 设置阴影的颜色、偏移量、模糊半径
  28. // 创建阴影对象
  29. OH_Drawing_TextShadow *shadow = OH_Drawing_CreateTextShadow();
  30. // 设置阴影偏移量为(5, 5)
  31. OH_Drawing_Point *offset = OH_Drawing_PointCreate(5, 5);
  32. // 定义阴影模糊半径为4
  33. OH_Drawing_SetTextShadow(shadow, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0xFF), offset, 4);
  34. // 拷贝阴影对象
  35. OH_Drawing_TextShadow *shadowCopy = OH_Drawing_CopyTextShadow(shadow);
  36. // 将拷贝出的阴影添加到文本样式中
  37. OH_Drawing_TextStyleAddShadow(txtStyle, shadowCopy);
  38. // 创建FontCollection,FontCollection用于管理字体匹配逻辑
  39. OH_Drawing_FontCollection *fc = OH_Drawing_CreateSharedFontCollection();
  40. // 使用FontCollection和之前创建的TypographyStyle创建TypographyCreate。TypographyCreate用于创建Typography
  41. OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fc);
  42. // 将段落一文本样式添加到handler中
  43. OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
  44. // 将段落一文本添加到handler中
  45. const char *text = "The text style, paragraph style, and text shadow of the copied text will be exactly the same "
  46. "as those of the original text.";
  47. OH_Drawing_TypographyHandlerAddText(handler, text);
  48. // 创建段落一,并将段落一按照排版宽度进行排版
  49. OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
  50. double maxWidth = width_;
  51. OH_Drawing_TypographyLayout(typography, maxWidth);
  52. OH_Drawing_TypographyPaint(typography, cCanvas_, 0, DIV_TEN(width_));
  53. // 生成第二段文本,其中,文本样式和段落样式均由第一段文本拷贝而来
  54. // 复制文本样式
  55. OH_Drawing_TextStyle *textStyleCopy = OH_Drawing_CopyTextStyle(txtStyle);
  56. // 复制段落样式
  57. OH_Drawing_TypographyStyle *typographyStyleCopy = OH_Drawing_CopyTypographyStyle(typoStyle);
  58. // 使用复制的样式创建段落二,后续可以观察段落一和段落二是否绘制效果一致
  59. OH_Drawing_TypographyCreate *handlerCopy = OH_Drawing_CreateTypographyHandler(typographyStyleCopy, fc);
  60. OH_Drawing_TypographyHandlerPushTextStyle(handlerCopy, textStyleCopy);
  61. OH_Drawing_TypographyHandlerAddText(handlerCopy, text);
  62. OH_Drawing_Typography *typographyCopy = OH_Drawing_CreateTypography(handlerCopy);
  63. OH_Drawing_TypographyLayout(typographyCopy, maxWidth);
  64. OH_Drawing_TypographyPaint(typographyCopy, cCanvas_, 0, DIV_TWO(width_));
  65. // 释放内存
  66. OH_Drawing_DestroyFontCollection(fc);
  67. OH_Drawing_DestroyTypographyStyle(typoStyle);
  68. OH_Drawing_DestroyTextStyle(txtStyle);
  69. OH_Drawing_DestroyTypographyHandler(handler);
  70. OH_Drawing_DestroyTypography(typography);
  71. // 拷贝的段落样式也需要释放内存
  72. OH_Drawing_DestroyTypographyStyle(typographyStyleCopy);
  73. // 拷贝的文本样式也需要释放内存
  74. OH_Drawing_DestroyTextStyle(textStyleCopy);
  75. OH_Drawing_DestroyTypographyHandler(handlerCopy);
  76. OH_Drawing_DestroyTypography(typographyCopy);
  77. OH_Drawing_PointDestroy(offset);
  78. OH_Drawing_DestroyTextShadow(shadow);
  79. OH_Drawing_DestroyTextShadow(shadowCopy);