js计算文本在页面所占px宽度

最新推荐文章于 2024-03-14 22:01:39 发布

原创最新推荐文章于 2024-03-14 22:01:39 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

小程序同时被 2 个专栏收录

14 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍了一种通过扩展String原型方法实现计算文本在页面上实际占用宽度的方法，适用于Web端及小程序端。该方法利用HTML5 Canvas或小程序Canvas API测量文本宽度。

计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth（web端适用）

/*** 获取文本px宽度* @param font{String}: 字体样式**/
String.prototype.pxWidth = function(font) {
  var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
      context = canvas.getContext("2d"); 

  font && (context.font = font);
  var metrics = context.measureText(this);

  return metrics.width;
}

计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth（小程序端适用）

componentDidMount(){
    /*** 获取文本px宽度* @param font{String}: 字体样式**/
    String.prototype.pxWidth = function(font) {
      let metrics = {}
      try {
        let context = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = Taro.createCanvasContext('description'))
        font && (context.font = font);
        metrics = context.measureText(this);
      } catch (e) {}
      return metrics.width || 0;
    }
  }

render() {
    return (
      <View>
        <Canvas canvasId='description' type='2d' style={{position: 'fixed', top: '-100rpx', left: '0rpx', width: '750rpx', height: '100rpx'}}></Canvas>
      </View>
    )
  }