javascript - 计算测试路径长度

Question

我正在尝试解决一个问题，我需要知道用户键入的文本的路径长度。示例用户键入“Hello World”我需要检查以特定字体大小（以 pt 为单位）键入特定字体时 Hello world 路径的长度。

我将获得的长度需要将其转换为米，以便我可以在现实世界中使用它来构建 Neon。

我应该如何解决这个问题是否有任何图书馆可以帮助我做到这一点？

谢谢

score 1 · Accepted Answer

我没有任何特定的库可以推荐，但这里有一个片段说明你可以如何去做你想做的事。从像素到厘米的转换在这里是近似的，毕竟只是一个演示。

const getRuler = element => {
  const ctx = document.createElement('canvas').getContext('2d');
  const style = window.getComputedStyle(element);
  const fontSize = style.getPropertyValue('font-size');
  const fontFamily = style.getPropertyValue('font-family');
  ctx.font = `${fontSize} ${fontFamily}`;
  return ctx;
}

const element = document.querySelector('#my-element-with-text');

function updateLength(e) {
  const element = e.target
  const text = element.innerText;
  const ruler = getRuler(element);
  const length = ruler.measureText(text).width;

  const result = document.querySelector('#length');

  result.innerText = (length * 0.026458).toFixed(4) + ' centimeters';
}

element.addEventListener('keyup', updateLength);

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

main {
  margin-top: 15vh;
  margin-left: 10vw;
  width: 85%;
}

#my-element-with-text {
  border: 1px solid black;
  border-radius: 3px;
  height: 2em;
  font-size: 5vw;
  width: fit-content;
  min-width: 200px;
  line-height: 2em;
  padding: 0 12px;
  font-family: 'Helvetica Neue', sans-serif;
}

<main>
  <div>Enter text here</div>
  <div id='my-element-with-text' contenteditable='true'></div>
  <div id='length'></div>
</main>

score 0 · Accepted Answer

这是一个多步骤的过程，现在我没有所有的答案。

加载字体以用作网络字体。通常，这意味着您可以访问像Google 字体这样的提供商，并获得一个样式表的链接，该样式表将为您完成工作，包括决定您的浏览器将理解哪种字体格式。但在这种情况下，您需要最终字体文件的完整地址。如果您在自己的服务器上提供字体文件，这将是微不足道的。

由于您最终需要文件内容本身，因此最好的策略可能是通过 AJAX 请求加载字体文件，然后将其插入到文档字体资源中，并将其加载到可以访问字体轮廓数据的特殊解析器中. 这可能是opentype.js - 请注意，它是一个缩小 162kB 的主要软件。加载字体后，您就可以开始查找要测量的文本：

 window.fetch(fontUrl).then(response => {
     // read response into an ArrayBuffer
     return response.arrayBuffer();
 }).then(buffer => {
     // load into parser
     const parsedFont = opentype.parse(buffer);
     // load into browser resources, family is the name for CSS reference
     const fontFace = new FontFace(family, buffer);
     document.fonts.add(fontFace);
     // add an event listener to your text input
     document.querySelector('#textToMeasure').addEventListener('change', event => {
         textToOutline(parsedFont, event.target.value);
     });
 });

每次文本输入更改时，您现在都会将该文本呈现到 SVG 路径。为此，您需要在页面中有一个（不可见的）SVG 片段：

 <svg width="0px" height="0px"><path id="outlinePath" d="" /></svg>

您可以通过向对象提供文本和字体大小来获取路径数据，font然后为您的 SVG 设置它们<path>：

 function textToOutline (font, text) {
     // size means font size in pixels
     const pathData = font.getPath(text, 0, 0, size).toPathData(4);
     // write to path
     const path = document.querySelector('#outlinePath');
     path.setAttribute('d', pathData);

     measureOutline(path);
 }

现在文本大纲是浏览器可以使用自己的 API 测量的格式。

 function measureOutline (path) {
     // length in pixels
     const pathLength = path.getTotalLength();
     // factor would be the conversion factor to your intended unit,
     // and unit the unit name
     document.querySelector('#lengthResult').innerText = (pathLength * factor) + unit;
 }

javascript - 计算测试路径长度

2 回答 2

Related

Reference