关于js计算非等宽字体宽度的方法

DevTalking 发布于2019-08-23 14:22 / 647人阅读

摘要：准备一个容器首先在外插入一个的容器避免重绘计算方法总结出了两种方法，这里由于我使用的是，其他元素同理。下面先说性能最好的一个方法，先创建所有的元素，然后统一到准备好的容器里。

准备一个容器

首先在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);

GPU云服务器云服务器计算字体宽度js 等宽字体 js 获取控件的宽度关于云计算的论文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100514.html

关于js计算非等宽字体宽度的方法

摘要：准备一个容器首先在外插入一个的容器避免重绘计算方法总结出了两种方法，这里由于我使用的是，其他元素同理。下面先说性能最好的一个方法，先创建所有的元素，然后统一到准备好的容器里。准备一个容器首先在body外插入一个absolute的容器避免重绘： const svgWidthTestContainer = document.createElement(svg); svgWidthTes...

BDEEFE 2019-08-30 15:55 评论0 收藏0
关于js计算非等宽字体宽度的方法

摘要：准备一个容器首先在外插入一个的容器避免重绘计算方法总结出了两种方法，这里由于我使用的是，其他元素同理。下面先说性能最好的一个方法，先创建所有的元素，然后统一到准备好的容器里。准备一个容器首先在body外插入一个absolute的容器避免重绘： const svgWidthTestContainer = document.createElement(svg); svgWidthTes...

B0B0 2019-08-02 13:58 评论0 收藏0
[译] 关于两种视口（viewport）的故事：其一

摘要：它能给予一个关于你使用何种设备的正式结论，并且能通过获得。宽度两倍，高度两倍，总体四倍。视口的作用是限制元素，元素是所有网页块元素中最高一级的元素。视口并非一个结构，其不受控制。重点是上诉结论是在缩放的条件下成立的。原文地址：http://quirksmode.org/mobile/... 这篇小短文中，我将会介绍关于viewport与诸如html元素，window 对象，scree...

rose 2019-08-01 15:43 评论0 收藏0
设计小课堂：浅谈界面中的文字字体

Image byWilli HeidelbachfromPixabay在UI设计中，文本是常用的元素之一，他是传递信息的主要工具。或许是因为它太过基础，很多时候我们会忽视它的存在，导致页面最终效果不够理想。对于注重用户体验的产品来说，每一个细节的偏差都可能成为致命伤。艺术是无依据可循的，但是文字排版却是有依据可循的。正文的大小、字阶的比例，字与字之间的距离、文本的颜色和对比度等，都是影响可读性和易...

ernest.wang 2022-07-07 17:40 评论0 收藏0