@antv/g-base/src/util/text.ts

A common util collection for antv projects

import { isNil, each, isString } from './util';
import { getOffScreenContext } from './offscreen';
import { ShapeAttrs } from '../types';

/**
 * 获取文本的高度
 * @param text 文本
 * @param fontSize 字体大小
 * @param lineHeight 行高，可以为空
 */
export function getTextHeight(text: string, fontSize: number, lineHeight?: number): number {
  let lineCount = 1;
  if (isString(text)) {
    lineCount = text.split('\n').length;
  }
  if (lineCount > 1) {
    const spaceingY = getLineSpaceing(fontSize, lineHeight);
    return fontSize * lineCount + spaceingY * (lineCount - 1);
  }
  return fontSize;
}

/**
 * 获取行间距如果文本多行，需要获取文本间距
 * @param fontSize 字体大小
 * @param lineHeight 行高
 */
export function getLineSpaceing(fontSize: number, lineHeight?: number): number {
  return lineHeight ? lineHeight - fontSize : fontSize * 0.14;
}

/**
 * 字体宽度
 * @param text 文本
 * @param font 字体
 */
export function getTextWidth(text: string, font: string) {
  const context = getOffScreenContext(); // 获取离屏的 ctx 进行计算
  let width = 0;
  // null 或者 undefined 时，宽度为 0
  if (isNil(text) || text === '') {
    return width;
  }
  context.save();
  context.font = font;
  if (isString(text) && text.includes('\n')) {
    const textArr = text.split('\n');
    each(textArr, (subText) => {
      const measureWidth = context.measureText(subText).width;
      if (width < measureWidth) {
        width = measureWidth;
      }
    });
  } else {
    width = context.measureText(text).width;
  }
  context.restore();
  return width;
}

export function assembleFont(attrs: ShapeAttrs) {
  const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } = attrs;
  return [fontStyle, fontVariant, fontWeight, `${fontSize}px`, fontFamily].join(' ').trim();
}