const textRenderer = entity.addComponent(TextRenderer);
textRenderer.xxx = yyy; // 通过设置组件的各属性来设置文本以及样式等

export class TextRenderer extends Renderer {
  /**
    * Rendering color for the Text.
    */
  get color(): Color;
  set color(value: Color);
  /**
    * Rendering string for the Text.
    */
  get text(): string;
  set text(value: string);
  /**
    * The width of the TextRenderer (in 3D world coordinates).
    */
  get width(): number;
  set width(value: number);
  /**
    * The height of the TextRenderer (in 3D world coordinates).
    */
  get height(): number;
  set height(value: number);
  /**
    * The font of the Text.
    */
  get font(): Font;
  set font(value: Font);
  /**
    * The font size of the Text.
    */
  get fontSize(): number;
  set fontSize(value: number);
  /**
    * The style of the font.
    */
  get fontStyle(): FontStyle;
  set fontStyle(value: FontStyle);
  /**
    * The space between two lines (in pixels).
    */
  get lineSpacing(): number;
  set lineSpacing(value: number);
  /**
    * The horizontal alignment.
    */
  get horizontalAlignment(): TextHorizontalAlignment;
  set horizontalAlignment(value: TextHorizontalAlignment);
  /**
    * The vertical alignment.
    */
  get verticalAlignment(): TextVerticalAlignment;
  set verticalAlignment(value: TextVerticalAlignment);
  /**
    * Whether wrap text to next line when exceeds the width of the container.
    */
  get enableWrapping(): boolean;
  set enableWrapping(value: boolean);
  /**
    * The overflow mode.
    */
  get overflowMode(): OverflowMode;
  set overflowMode(value: OverflowMode);
}

const isTextureDirty = this._isContainDirtyFlag(DirtyFlag.Property);
if (isTextureDirty) {
  // 更新文本，第 2、3 步都在这里
  this._updateText();
  this._setDirtyFlagFalse(DirtyFlag.Property);
}

export interface TextMetrics {
  width: number; // 需要 Canvas 的宽度
  height: number; // 需要 Canvas 的高度
  lines: Array<string>; // 每行文本的数组
  lineWidths: Array<number>; // 每行文本的宽度
  lineHeight: number; // 每行文本的高度，包括行间距了
}

public static updateText(
  textMetrics: TextMetrics,
  fontStr: string,
  horizontalAlignment: TextHorizontalAlignment,
  verticalAlignment: TextVerticalAlignment
): void {
  const { canvas, context } = TextUtils.textContext();
  const { width, height } = textMetrics;
  // 重置 canvas 的宽高
  canvas.width = width;
  canvas.height = height;
  // 清理 canvas
  context.font = fontStr;
  context.clearRect(0, 0, width, height);
  // 设置文本绘制相关信息
  context.textBaseline = "middle";
  context.fillStyle = "#fff";
 
  // draw lines.
  const { lines, lineHeight, lineWidths } = textMetrics;
  const halfLineHeight = lineHeight * 0.5;
  for (let i = 0, l = lines.length; i < l; ++i) {
    const lineWidth = lineWidths[i];
    const pos = TextUtils._tempVec2;
    // 根据对齐规则计算 pos
    TextUtils._calculateLinePosition(width, height, lineWidth, lineHeight, i, l, horizontalAlignment, verticalAlignment, pos);
    const { x, y } = pos;
    // 超出 canvas 范围的就不绘制了
    if (y + lineHeight >= 0 && y < height) {
      // 绘制文本
      context.fillText(lines[i], x, y + halfLineHeight);
    }
  }
}