在不渲染的情况下测量文本的宽度/高度

小编典典

在不渲染的情况下测量文本的宽度/高度

reactjs

有什么方法可以在不渲染实际元素的情况下获得文本宽度的估算值？像画布TextMetrics一样？

案例：我需要估计ReactList的元素高度。为此，我需要大致知道文本元素将需要多少空间（或它们将跨越多少行）。

例如。

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

如果我知道someText将被渲染成一行的宽度以及该行的长度，那么我可以很容易地得出组件高度的合理估计。

编辑：请注意，这是非常重要的性能， 不应触碰DOM

阅读 312

2020-07-22

共1个答案

小编典典

请检查一下。是使用画布的解决方案

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规范没有提供用于测量字符串高度的方法，因此可以使用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']);

2020-07-22