Ver índice
Manejando fuentes

        Ocultar índice  

   Índice de contenidos
   Instalación en Windows
   Instalación en Ubuntu
   Servidores seguros
   Páginas dinámicas
   Sintaxis básica
   Operaciones
   Arrays
   Formatos de presentación
   Operadores
   Bucles
   Extraer y ord. información
   Funciones
   Ficheros externos
   Imágenes dinámicas
   Gestión de directorios
   Cookies y sesiones
   Clases y objetos
   Ficheros en formato PDF
   Bases de datos MySQL
   PHP y XML
   PDO - Bases SQLite / MySQL
   MySQL a traves de misqli
   Algo de JavaScript y AJAX


Utilizando fuentes TrueType

Si has leído los comentarios de la página anterior recordarás que para usar estas funciones es preciso que estén instaladas las librerías FreeType y que, además, conozcamos el path de directorio que contiene las fuentes TrueType.

Hemos creado un subdirectorio llamado fuentes y lo hemos incluido en directorio donde están alojadas estas páginas. En ese subdirectorio hemos incluido dos fuentes TrueType manteniendo en una de ellas el nombre original (arial.ttf) y renombrado la otra como fuente2.ttf.

Como podrás comprobar en los ejemplos, no hay problema alguno por el hecho de renombrar las fuentes.

Escribiendo con fuentes TrueType

La función PHP que nos permite insertar este tipo de textos en imágenes dinámicas es la siguiente:

Imagettftext($nombre, tamaño, angulo, x, y, $color, $fuente, $texto)

donde:

Texto True Type horizontal

<?php
    Header("Content-type: image/png");
	$im = imagecreate(400,300);
        $fondo=imagecolorallocate ($im, 255, 255, 210);
	$rojo=imagecolorallocate ($im, 255, 0, 0);
         $texto="PHP";
        Imagettftext($im, 40, 0, 100, 270, $rojo,"./fuentes/fuente2.ttf", $texto);
        Imagepng($im);
        imagedestroy($im);

?>
Ver ejemplo224.php
Formato PNG
Ver ejemplo225.php
Formato JPG

Texto True Type girado

<?php
    Header("Content-type: image/png");
	$im = imagecreate(400,300);
        $fondo=imagecolorallocate ($im, 255, 255, 210);
	$rojo=imagecolorallocate ($im, 255, 0, 0);
        $texto="Me gusta PHP";
        Imagettftext($im, 40, 30, 100, 270, $rojo, "./fuentes/fuente2.ttf", $texto);
        Imagepng($im);
        imagedestroy($im);

?>
Ver ejemplo226.php
Formato PNG
Ver ejemplo227.php
Formato JPG

  ¡Cuidado!  

Las rutas (path) de la las fuentes utilizadas por Imagettftext pueden darte un montón de quebraderos de cabeza. Las rutas relativas que ves en estos ejemplos no parecen dar problema alguno. Sin embargo si hiciéramos algo como crear una variable previa del tipo: $ruta="fuentes"; y luego sustituir "./fuentes/fuente2.ttf" por: "./". $ruta."/fuente2.ttf" que aparentemente da el mismo resultado ./fuentes/fuente2.ttf se nos genera un error de fuente no encontrada.
La solución que parece ser más efectiva es huir como alma que lleva el diablo del uso de variables en la asignación de rutas de las fuentes. Vamos, ¡escribir la ruta completa a pico y pala!

Colocando los textos

PHP dispone de una función que permite determinar las dimensiones de una caja de texto (el rectángulo imaginario que rodea el texto).

$rect= ImageTTFBBox (tamaño, angulo, fuente, $texto)

donde tamaño es el tamaño de la fuente a utilizar, angulo es el ángulo de rotación del texto que tendría valor cero en el caso de orientación horizontal, fuente es el path y nombre de la fuente a a utilizar, $texto es el nombre de la variable que contiene el texto a incluir.

La variable $rect recoge un array escalar cuyos valores son las coordenadas de las cuatro esquinas de la caja de texto.

Los índices correspondientes a cada uno de los elementos de ese array son los siguientes:

Respecto a estas coordenadas, habremos de tener en cuenta lo siguiente:


Centrando textos

Aquí tienes un ejemplo donde utilizando ImageTTFBox e ImageTTFText se puede centrar un texto -tanto si es horizontal como si está girado- con relación a un punto. En este ejemplo, el punto de referencia para el centrado es (200,150) que es el centro de la imagen.

Las coordenadas de ImageTTFText, como puedes ver, están calculadas usando las coordenadas de ese punto de referencia y los valores del array generado por ImageTTFBox.

Si la variable que contiene el array generado por ImageTTFBox se llama $pepa, las coordenadas del centro del rectángulo imaginario son $pepa[4]/2 y $pepa[5]/2.

Partiendo de esos valores, si queremos centrar el texto sobre un punto de la imagen cuyas coordenadas son (X,Y) nos basta con escribir como parámetros de la función ImageTTFText los siguientes:

Este procedimiento es válido tanto para textos horizontales como para textos girados.

<?php
    Header("Content-type: image/png");

    $im = imagecreate(400,300);   
    $fondo=imagecolorallocate ($im, 255, 255, 210);
    $gris=imagecolorallocate ($im, 160, 160,160);
    $rojo=imagecolorallocate ($im, 255, 0, 0);
 
    $texto="El mundo del PHP";
    $texto1="lleno de posibilidades";
$marco= ImageTTFBBox (40,  0, "./fuentes/arial.ttf", $texto);
Imagettftext($im,40,0,200-$marco[4]/2,150-$marco[5]/2, $gris,"./fuentes/arial.ttf",$texto);
$marco1= ImageTTFBBox (30,  30, "./fuentes/fuente2.ttf", $texto1);
Imagettftext($im,30,30,200-$marco1[4]/2,150-$marco1[5]/2,$rojo,"./fuentes/fuente2.ttf", $texto1);
        Imagepng($im);
        imagedestroy($im);
   
?>
Ver ejemplo228.php
Formato PNG
Ver ejemplo229.php
Formato JPG

Un ejemplo resumen

Aquí tienes un ejemplo bastante completo de generación de imágenes dinámicas.

Ver ejemplo230.php Ver código fuente