准备一个容器

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


const svgWidthTestContainer = document.createElement('svg');
svgWidthTestContainer.setAttribute('id', 'svgWidthTest'); svgWidthTestContainer.style.cssText = `
position: absolute;
width: 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

关于js计算非等宽字体宽度的方法的更多相关文章

  1. Objective-C 如何让非等宽的数字和空格对齐

    在printf中,我们可以通过格式字符串来对文字进行对齐输出,比如: printf("%5d\n%5d", 12, 345); 在使用等宽字体的Console中,我们可以看到数字右 ...

  2. JS计算文本字符串字节长度和像素长度的方法

    来源:js获取字符长度并计算px宽度 - [云]风过无痕 - 博客园 (cnblogs.com) <!DOCTYPE html> <html lang="en"& ...

  3. PHP计算思源字体宽度, 并把文字绘制到图片上

    2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况,  这就要计算 ...

  4. eclipse 中使用等宽字体 inconsolata

    一直以来,就感觉使用 eclipse 时的那几种字体很难看,而且非等宽,空格宽度很小,排版很乱. 搜索并试用了一下,发现了字体inconsolata. 这是一个很适合编程的字体,效果如下: 非常漂亮. ...

  5. CSS 条件判断、等宽字体以及ch单位

    <!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8"> ...

  6. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  7. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  8. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  9. vs2010等宽字体设置

    VS2010自带的字体非等宽,不同行的代码采用同样的缩进空格时,可能左侧未对齐. 这个里有一款字体很帮,字体名字叫Fixedsys Excelsior 3.01,下载地址:http://www.fix ...

随机推荐

  1. HGOI 20190705 题解

    Problem A 树状数组 给出数x,一直执行x = x and (x+1)-1 直到 x=0 为止 询问这个数执行运算的次数. 这个数以二进制的形式表述出 x = s1 & s2 .... ...

  2. python实现一个层次聚类方法

    层次聚类(Hierarchical Clustering) 一.概念 层次聚类不需要指定聚类的数目,首先它是将数据中的每个实例看作一个类,然后将最相似的两个类合并,该过程迭代计算只到剩下一个类为止,类 ...

  3. Python3 获取一大段文本之间两个关键字之间的内容

    用re或者string.find.以下是re代码 123456789101112131415import re#文本所在TXT文件file = '123.txt' #关键字1,2(修改引号间的内容)w ...

  4. happens-before规则和as-if-serial语义

    JSR-133使用happens-before的概念来阐述操作之间的内存可见性.在JMM中,如果一个操作执行的结果需要对另一个操作可见, 那么这2个操作之间必须要存在happens-before关系. ...

  5. lyf基础作业

    include <stdio.h> include <stdlib.h> int main (void) { FILE * fp; int a[10]; int max=0; ...

  6. 【Linux】单计算机安装PBS系统(Torque)与运维

    1.此次使用torque-5.0.0-1_43d8f09a.tar.gz这个版本http://www.adaptivecomputing.com/downloading/?file=/torque/t ...

  7. Uploading multiple files asynchronously by blueimp jquery-fileupload

    Uploading multiple files asynchronously by blueimp jquery-fileupload   Solved. Fiddle: http://jsfidd ...

  8. 正则表达式中常用的模式修正符有i、g、m、s、x、e详解

    正则表达式中常用的模式修正符有i.g.m.s.x.e等.它们之间可以组合搭配使用. 它们的作用如下: //修正符:i 不区分大小写的匹配; //如:"/abc/i"可以与abc或a ...

  9. golang中,unsafe.sizeof到底是干嘛的?

    https://www.golangtc.com/t/5ad833404ce40d2654053485 小生初学Go,有一点不懂,今天为了知道空结构体到底占多大的空间的时候,去百度说用unsafe.s ...

  10. electron创建窗口常用配置参数

    { "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...