Javascript 计算测试路径长度

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

我将得到的长度，我需要把它转换成米，我可以在现实世界中使用它来建造霓虹灯

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

---

谢谢

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

const getRuler=element=>{
const ctx=document.createElement（'canvas'）.getContext（'2d'）；
const style=window.getComputedStyle（元素）；
const-fontSize=style.getPropertyValue（'font-size'）；
const fontFamily=style.getPropertyValue（'font-family'）；
ctx.font=`${fontSize}${fontFamily}`；
返回ctx；
}
const element=document.querySelector（“#带文本的我的元素”）；
函数更新长度（e）{
常量元素=e.target
const text=element.innerText；
常量标尺=getRuler（元素）；
常量长度=标尺.measureText（文本）.width；
const result=document.querySelector（'#length'）；
result.innerText=（长度*0.026458）.toFixed（4）+“厘米”；
}
元素。addEventListener（'keyup'，updateLength）
正文{
身高：100%；
宽度：100%；
保证金：0；
}
主要{
边缘顶部：15vh；
左边距：10vw；
宽度：85%；
}
#我的元素与文本{
边框：1px纯黑；
边界半径：3px；
高度：2米；
字体大小：5vw；
宽度：适合的内容；
最小宽度：200px；
线高：2米；
填充：0 12px；
字体系列：“Helvetica Neue”，无衬线；
}

在此处输入文本
这是一个多步骤的过程，目前我还不知道所有的答案

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


由于最终需要文件内容本身，最好的策略可能是通过AJAX请求加载字体文件，然后将其插入文档字体资源，并将其加载到一个特殊的解析器中，该解析器提供对字体轮廓数据的访问。这可能是-注意，它是一个主要的软件与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>


现在，文本大纲的格式是浏览器可以使用自己的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;
 }


1磅等于1/72英寸。你应该能够直接计算宽度。你的问题模棱两可。您想知道从第一个字母到最后一个字母的基线长度，还是书写时羽毛笔必须绘制的笔划长度，或者每个字形周围完整轮廓的长度？@ccprog我需要知道每个字形的路径，这样我就知道将使用多少霓虹管来构建它。@Edi0感谢您的澄清。我在下面做的代码片段只是演示canvas.measureText（）api来测量行长度，而不是跟踪每个字母的完整长度。听起来你需要一个更复杂的算法。祝您好运。@Edi0要继续，您可能需要研究Adobe Illustrator之类的程序。我不确定，但我相信它能够将字体文本转换为向量路径，然后给出路径长度的度量。长度是以像素为单位的，但由于OP提到转换为米，我想出于好玩，我会让它显示厘米。我只是在谷歌上搜索转换系数，我不能保证它在现实世界中的准确性。我应该如何使用它来计算字体大小（以pts为单位），然后将其转换为米？我试图实现的是创建一个应用程序，让人们输入世界，我计算这个单词的长度（米）。然后我们给他们确切的成本，因为我们知道将使用多少米的霓虹管。@RenevanderLende不，1英寸在你的屏幕上只有96px，在我的屏幕上是103px。此转换取决于设备。此外，我认为这个答案并没有回答被问到的问题，问题是关于用霓虹灯追踪每个字母。此处计算的长度仅给出文本起点到终点的距离。
 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;
 }