在不渲染的情况下测量文本宽度/高度
在不渲染的情况下测量文本宽度/高度
提问于 2015-07-09 06:38:56
有没有办法在不渲染实际元素的情况下获得文本宽度的估计值？像canvas TextMetrics这样的东西？
案例:我需要估计ReactList的元素高度。要做到这一点，我需要知道文本元素需要多少空间(或者它们将跨越多少行)。
例如：
render(){
return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}如果我知道someText将被渲染到一行中有多宽，以及这行有多长，我就可以很容易地对组件高度做出一个合理的估计。
编辑:请注意，这是非常关键的性能，不应该接触的DOM
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-09 07:10:40
请检查一下这个。是使用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());编辑
使用canvas的解决方案并不是最好的，每个浏览器处理不同的canvas大小。
Here是使用临时元素获取文本大小的一个很好的解决方案。Demo
编辑
canvas规范没有为我们提供测量字符串高度的方法，因此我们可以使用parseInt(context.font)。来获取宽度和高度。此技巧仅适用于px大小。
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']);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31305071
复制相关文章
相似问题