在不渲染的情况下测量文本 width/height
Measuring text width/height without rendering
有没有什么方法可以在不渲染实际元素的情况下估算文本宽度?类似于 canvas TextMetrics?
案例:我需要估算 ReactList 的元素高度。为此,我需要大致知道 space 文本元素需要多少(或者它们将跨越多少行)。
例如
render(){
return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}
如果我知道将 someText 渲染成一行的宽度以及该行的长度,我可以轻松地对组件高度进行合理的估计。
编辑:请注意,这对性能非常关键,不应触及 DOM
请检查这个。是使用 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']);
有没有什么方法可以在不渲染实际元素的情况下估算文本宽度?类似于 canvas TextMetrics?
案例:我需要估算 ReactList 的元素高度。为此,我需要大致知道 space 文本元素需要多少(或者它们将跨越多少行)。
例如
render(){
return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}
如果我知道将 someText 渲染成一行的宽度以及该行的长度,我可以轻松地对组件高度进行合理的估计。
编辑:请注意,这对性能非常关键,不应触及 DOM
请检查这个。是使用 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']);