计算文字宽度

• 方法1

// 通过canvas画出文字并计算宽度（实际测试了，目前看是没什么问题）
export const getTextWidth = (text: string, font: string): number => {
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')
   context.font = font
   const metrics = context.measureText(text)
   return metrics.width
}
// getTextWidth('哈哈哈哈', '14px sans-serif') // 56

• 方法2

// 已知的dom在设计稿上的宽度
const benchmarkWidth = 542;
// 创建两个ref，并绑定在dom上
this.benchmarkRef = React.createRef();//比对的dom，已知dom的宽度
this.myRef = React.createRef();//要计算的dom

// 计算比例
const benchmarkRatio =
  this.benchmarkRef.current ? benchmarkWidth / this.benchmarkRef.current.offsetWidth : "";
// 通过比例计算宽度
const width =
  benchmarkRatio && this.myRef.current ? this.myRef.current.offsetWidth * benchmarkRatio : "";