web-dev-qa-db-ja.com

レンダリングせずにテキストの幅/高さを測定する

実際の要素をレンダリングせずにテキスト幅の見積もりを取得する方法はありますか？キャンバスのTextMetricsのようなものですか？

ケース：ReactListの要素の高さを推定する必要があります。これを行うには、テキスト要素に必要なスペースの大きさ（またはそれらにまたがる行の数）を大まかに知る必要があります。

例えば。

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

SomeTextが1行にレンダリングされる幅と、その長さがわかっている場合、コンポーネントの高さを適切に見積もることができます。

編集：これは非常にパフォーマンスが重要であり、DOMには触れないでくださいであることに注意してください

javascripthtmltextreactjsdimension
21
Seppo420

こちらをご確認ください。キャンバスを使用したソリューションです

_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サイズを扱います。

ここ は、一時的な要素を使用してテキストのサイズを取得するための素晴らしいソリューションです。 デモ

[〜＃〜]編集[〜＃〜]

キャンバスの仕様では、文字列の高さを測定する方法が提供されていないため、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']);
_
21
vasilenicusor