zoukankan      html  css  js  c++  java
  • 关于js计算非等宽字体宽度的方法

    准备一个容器

    首先在body外插入一个absolute的容器避免重绘:

    
    const svgWidthTestContainer = document.createElement('svg');
    svgWidthTestContainer.setAttribute('id', 'svgWidthTest');
    
    svgWidthTestContainer.style.cssText = `
      position: absolute;
       500px;
      height: 500px;
      left: -1000px;
      top: -1000px;
      visibility: 'hidden';
    `;
    document.body.appendChild(svgWidthTestContainer);
    

    计算方法

    总结出了两种方法,这里由于我使用的是svg,其他元素同理。下面先说性能最好的一个方法,先创建所有的text元素,然后统一append到准备好的容器里。
    代码如下:

    
    export function getSvgsWidth(texts) {
      // 这里使用div不用fragment主要是不方便删除
      const textsFragment = document.createElement('g');
      const textElements = texts.map((text) => {
        const textElement = document.createElement('text');
        textElement.textContent = text;
        textsFragment.appendChild(textElement);
        return textElement;
      });
      svgWidthTestContainer.appendChild(textsFragment);
      const textElementsWidth = textElements.map(element => element.getBoundingClientRect().width);
      svgWidthTestContainer.removeChild(textsFragment);
      return textElementsWidth;
    }
    // 得到1-1000000数字在屏幕上的宽度
    console.log(getSvgsWidth([...Array(100000).keys()]));
    

    还有一个方法(不推荐)就是事先准备好一个text,然后每次替换里面的textContent返回宽度,代码如下:

    
    // 准备好text
    const textElementTest = document.createElement('text');
    
    svgWidthTestContainer.appendChild(textElementTest);
    
    export function getSvgsWidthWithOneText(texts) {
      const textElementsWidth = texts.map((text) => {
        textElementTest.textContent = text;
        return textElementTest.getBoundingClientRect().width;
      });
      return textElementsWidth;
    }
    
    
    
    // 可以做一个性能测试,我这边算出来他俩一直保持着5倍左右的差距
    const dateStart = new Date().getTime();
    console.log(getSvgsWidth([...Array(100000).keys()]));
    console.log(getSvgsWidthWithOneText([...Array(100000).keys()]));
    
    console.log(new Date().getTime() - dateStart);
    

    来源:https://segmentfault.com/a/1190000017551345

  • 相关阅读:
    [noip2010]关押罪犯 并查集
    双栈排序 noip2008
    欧拉函数
    中国剩余定理(孙子定理)
    求组合数
    线性素数筛
    洛谷 P2661 信息传递
    图的最短路
    Mzc和男家丁的游戏
    最佳旅游线路
  • 原文地址:https://www.cnblogs.com/datiangou/p/10192593.html
Copyright © 2011-2022 走看看