Longitud de un texto en Píxeles

Muchas veces nos interesará saber la longitud de un texto por los píxeles que ocupa, sobretodo cuando modificamos componentes o creamos de nuevos y tenemos que fusionar imágenes y texto en un mismo recuadro. Para saber lo que ocupa un texto solo tenemos que utilizar el componente canvas para que nos lo devuelva. El concepto es bastante simple. Si el componente que vamos a utilizar no tiene Canvas, debemos utilizar otro que si que lo tenga. De ésta manera, le pasamos la fuente de nuestro componente y luego calculamos la longitud.
Si el componente dispone de canvas, el cálculo es mucho más sencillo, ya que directamente nos puede devolver el valor de la longitud de su texto. En estos breves ejemplos se entenderá mejor:


Para el cálculo de los siguientes componentes: Label, Button y CheckBox, utilizaré diversos métodos, unos utilizando el propio canvas del componente en el caso del TLabel, otros utilizando el canvas del formulario, ya que utiliza la misma fuente que el TButton y otros utilizando un Bitmap intermedio. Se carga la fuente dentro de un bitmap y se escribe el texto, luego se calcula la longitud.

Normalmente hay que tener en cuenta una serie de píxeles para dejar un espacio antes y detrás del texto, pero ésto depende de cada componente. Normalmente se dejan 4 píxeles o sea 4 por delante y 4 por detrás, 8 píxeles.

En otros componentes nos encontraremos que tenemos que dejar más espacio o si queremos insertar iconos, pues posiblemente tendremos que dejar un espacio x más los 16 píxeles que ocupará el icono.

En la imagen podemos ver los diferentes textos y sus longitudes en píxeles. El código para realizar el cálculo es el siguiente:

procedure TForm1.Button1Click(Sender: TObject);
var
  Width: integer;
  Bitmap: TBitmap;
begin
    //Usando el Canvas del componente
    edit1.text := IntToStr(Label1.Canvas.TextWidth(Label1.Caption));
   
//Usando el canvas del formulario (utilizan la misma fuente)
    edit2.text := IntToStr(Form1.Canvas.TextWidth(Button1.Caption));

    //Ajustando el boton con un espaciado de 4 + 4 píxeles
    Button3.Width := StrToInt(edit2.text) + 8;

    //Utilizando un bitmap intermedio
    Bitmap := TBitmap.Create;
    Bitmap.Canvas.Font := Button2.Font;
    Width := Bitmap.Canvas.TextWidth(Button2.Caption);
    Bitmap.Free;
    edit3.text := IntToStr(Width);
   
//Usando el canvas del formulario (utilizan la misma fuente)
    edit4.text := IntToStr(Form1.Canvas.TextWidth(CheckBox1.Caption));
end;

Espero que os sirva de ayuda.