在不渲染的情况下测量文字的宽度/ [英] Measuring text width/height without rendering

问题描述

是否有任何方法可以在不渲染实际元素的情况下获得文本宽度的估计值？像canvas这样的TextMetrics？

案例：我需要估计ReactList的元素高度。要做到这一点，我需要大致了解文本元素需要多少空间（或者它们会跨越多少行）。

例如。

  render（）{
 return< div>< SomeComponentWithKnownDims />< p> {this.props.someText}< ; / p>< / DIV取代; 
} 
  

如果我知道someText会在多行中显示多长，线会是，我可以很容易地拿出一个体面的估计组件的高度。编辑：请注意，这是相当性能的关键和 DOM不应该是感动 请检查这一点。是一个使用canvas的解决方案
$ b

  function get_tex_width（txt，font）{
 this.element = document.createElement（'帆布'）; 
 this.context = this.element.getContext（2d）; 
 this.context.font = font; 
返回this.context.measureText（txt）.width; 
} 
 alert（'Calculated width'+ get_tex_width（Hello World，30px Arial））; 
 alert（Span text width+ $（span）。width（））; 
  

演示使用

编辑

使用画布的解决方案并不是最好的，每个浏览器处理不同的画布大小。

这里是使用临时元素获取文本大小的一个很好的解决方案。
演示

编辑

canvas规范不给我们测量字符串高度的方法，所以为此我们可以使用 parseInt函数（context.font）。
获得宽度和高度。这个技巧只适用于px大小。

 函数get_tex_size（txt，font）{
 this.element = document。的createElement（ '画布'）; 
 this.context = this.element.getContext（2d）; 
 this.context.font = font; 
 var tsize = {'width'：this.context.measureText（txt）.width，'height'：parseInt（this.context.font）}; 
返回tsize; 
} 
 var tsize = get_tex_size（Hello World，30px Arial）; 
 
 alert（'计算宽度'+ tsize ['width'] +';计算高度'+ tsize ['height']）; 
  

Is there any way to get an estimate for text width without rendering the actual elements? Something like canvas TextMetrics?

Case: I need to estimate element heights for ReactList. To do that I'd need to know roughly how much space the text elements will need (or how many lines will they span).

eg.

render(){
    return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}

If I knew how wide someText would be rendered into one line and how long the line would be, I could easily come up with a decent estimate for the components height.

EDIT: Note that this is quite performance critical and DOM should not be touched

解决方案

Please check this. is a solution using canvas

function get_tex_width(txt, font) {
        this.element = document.createElement('canvas');
        this.context = this.element.getContext("2d");
        this.context.font = font;
        return this.context.measureText(txt).width;
    }
    alert('Calculated width ' + get_tex_width("Hello World", "30px Arial"));
    alert("Span text width "+$("span").width());

Demo using

EDIT

The solution using canvas is not the best, each browser deal different canvas size.

Here is a nice solution to get size of text using a temporary element. Demo

EDIT

The canvas spec doesn't give us a method for measuring the height of a string, so for this we can use parseInt(context.font). TO get width and height. This trick work only with px size.

function get_tex_size(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext("2d");
    this.context.font = font;
    var tsize = {'width':this.context.measureText(txt).width, 'height':parseInt(this.context.font)};
    return tsize;
}
var tsize = get_tex_size("Hello World", "30px Arial");

alert('Calculated width ' + tsize['width'] + '; Calculated height ' + tsize['height']);

这篇关于在不渲染的情况下测量文字的宽度/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！