# 如何绘制包含emoji的图文混合内容

#### 问题现象

在drawTextBlob方法中，当emoji和文字内容是一个字符串混合在一起时，如何绘制包含emoji的图文混合内容？

#### 背景知识

*   Canvas组件主要用于自定义绘制图形。
*   drawTextBlob用于绘制一段文字。若构造blob的字体不支持待绘制字符，则该部分字符无法绘制。
*   CanvasRenderingContext2D是一个使用RenderingContext在Canvas组件上进行绘制的接口。
*   drawSingleCharacter用于绘制单个字符。当前字形中的字体不支持待绘制字符时，退化到使用系统字体绘制字符。

#### 解决方案

在此场景下，绘制emoji和文字混合的字符串不适合使用drawTextBlob方法。

*   方案一：可以用画布绘制将emoji和文字内容一起作为文本显示。参考代码如下：
    
    ```
    @Entry
    @Component
    struct DrawingMixedGraphicsAndText {
      private settings: RenderingContextSettings = new RenderingContextSettings(true);
      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
      private emoji: string = '123456\ud83d\ude06\ud83d\ude0b';
    
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Canvas(this.context)
            .width('100%')
            .height('100%')
            .onReady(() => {
              this.context.font = `${this.getUIContext().vp2px(30)}px bold sans-serif-black`;
              this.context.fillText(this.emoji, 20, 50);
            });
        }
        .width('100%')
        .height('100%');
      }
    }
    ```
    
    效果预览：
    
*   方案二：由于drawTextBlob不支持降级，可以通过接口drawSingleCharacter实现，drawSingleCharacter有字体退化处理的能力（在用户给的字体typeface不支持某些表情包时，可以退化查找其他已载入字体的typeface），没有设置字体会使用系统默认字体。具体使用可参考drawSingleCharacter中的示例，将示例中绘制的字符串替换为emoji即可。

#### 常见FAQ

Q：绘制带emoji或纯emoji的字符串的高度和宽度怎么获取呢？

A：可以使用文本计算measureText，参考官方示例。