關于js計算非等寬字體寬度的方法

BDEEFE 發布于2019-08-30 15:55 / 1476人閱讀

摘要：準備一個容器首先在外插入一個的容器避免重繪計算方法總結出了兩種方法，這里由于我使用的是，其他元素同理。下面先說性能最好的一個方法，先創建所有的元素，然后統一到準備好的容器里。

準備一個容器

首先在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 獲取控件的寬度關于云計算的論文

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117166.html

關于js計算非等寬字體寬度的方法

摘要：準備一個容器首先在外插入一個的容器避免重繪計算方法總結出了兩種方法，這里由于我使用的是，其他元素同理。下面先說性能最好的一個方法，先創建所有的元素，然后統一到準備好的容器里。準備一個容器首先在body外插入一個absolute的容器避免重繪： const svgWidthTestContainer = document.createElement(svg); svgWidthTes...

B0B0 2019-08-02 13:58 評論0 收藏0
關于js計算非等寬字體寬度的方法

摘要：準備一個容器首先在外插入一個的容器避免重繪計算方法總結出了兩種方法，這里由于我使用的是，其他元素同理。下面先說性能最好的一個方法，先創建所有的元素，然后統一到準備好的容器里。準備一個容器首先在body外插入一個absolute的容器避免重繪： const svgWidthTestContainer = document.createElement(svg); svgWidthTes...

DevTalking 2019-08-23 14:22 評論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