javascript - react - Medición del ancho/alto del texto sin renderizar

javascript canvas get text width

Question

¿Hay alguna manera de obtener un presupuesto para el ancho del texto sin representar los elementos reales? Algo así como lienzo TextMetrics?

Caso: necesito estimar las alturas de los elementos para ReactList. Para hacer eso necesitaría saber aproximadamente cuánto espacio necesitarán los elementos de texto (o cuántas líneas abarcarán).

p.ej.

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

Si supiera qué ancho tendría SomeText en una línea y cuánto tiempo duraría la línea, podría encontrar fácilmente una estimación decente para la altura de los componentes.

EDITAR: tenga en cuenta que esto es bastante crítico para el rendimiento y DOM no debe tocarse

Answer 1

Por favor, chequee esto. es una solución que usa lienzo

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 usando

EDITAR

La solución que utiliza lienzo no es la mejor, cada navegador trata un tamaño de lienzo diferente.

Aquí hay una buena solución para obtener el tamaño del texto usando un elemento temporal. Manifestación

EDITAR

La especificación del lienzo no nos da un método para medir la altura de una cadena, por lo que para esto podemos usar parseInt(context.font) . PARA obtener ancho y alto Este truco solo funciona con el tamaño de 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'']);