Creación de imágenes dinámicas con PHP IV

El ejemplo más clásico de programación con funciones GD es la creación de un botón dinámico. Un botón dinámico no es más que un enlace gráfico en el que la imagen contiene un texto, que nosotros definimos, adornado con cualquier otro elemento estético.

Aquí os presentamos el script para comentarlo a continuación:

<? //Calculamos las dimensiones del boton en funcion del tamano del texto //la variable $mensaje es recibida por POST o GET $cuadro = imagettfbbox (6,0,"fuente.TTF",$mensaje); $ancho = $cuadro[2]-$cuadro[0]+15; $im = imagecreate($ancho,15); //Generamos la paleta $rojo = imagecolorallocate($im,255,0,0); $verde = imagecolorallocate($im,192,200,95); $oscuro = imagecolorallocate($im,33,57,41); $blanco = imagecolorallocate($im,255,255,255); $transparente = imagecolortransparent ($im, $blanco); imagefill($im,0,0,$transparente); //Generamos los arcos laterales imagearc($im,7,7,12,12,90,150,$rojo); imagearc($im,7,7,12,12,210,270,$rojo); imagearc($im,7,7,11,11,90,150,$rojo); imagearc($im,7,7,11,11,210,270,$rojo); imagearc($im,$ancho-7,7,12,12,270,330,$rojo); imagearc($im,$ancho-7,7,12,12,30,90,$rojo); imagearc($im,$ancho-7,7,11,11,270,330,$rojo); imagearc($im,$ancho-7,7,11,11,30,90,$rojo); //Generamos las lineas rojas imagerectangle($im,7,1,$ancho/2-3,2,$rojo); imagerectangle($im,7,12,$ancho/2-3,13,$rojo); imagerectangle($im,$ancho/2+3,1,$ancho-7,2,$rojo); imagerectangle($im,$ancho/2+3,12,$ancho-7,13,$rojo); //Generamos los rectangulos de los cuadrantes imagefilledrectangle($im,$ancho/2-1,0,$ancho/2+1,3,$oscuro); imagefilledrectangle($im,$ancho/2-1,11,$ancho/2+1,14,$oscuro); imagefilledrectangle($im,0,6,3,8,$oscuro); imagefilledrectangle($im,$ancho-4,6,$ancho-1,8,$oscuro); //Sacamos el texto imagettftext($im,6,0,8,9,$oscuro,"fuente.TTF",$mensaje); //Mostramos el grafico en pantalla imagepng($im); //Liberamos memoria imagedestroy($im); ?>

Como puede verse la programación no resulta en absoluto complicada. El punto que reviste un poco más de atención es la definición de las coordenadas de cada figura trazada en función de las dimensiones del texto.

La primera operación antes siquiera de crear la imagen es evaluar el tamaño del texto que vamos a colocar de manera a ajustar el ancho del gráfico que será función obviamente de la longitud del mensaje. Este cálculo se realiza con la función imagettfbbox que nos proporcionará un array de ocho elementos correspondientes a las coordenadas de las cuatro esquinas de un rectángulo imaginario que engloba dicho texto. Teniendo en cuenta las coordenadas x de una esquina de la izquierda y otra de la derecha obtenemos el ancho del texto al que sumaremos unos píxeles para poder dibujar su entorno.

Una vez definido el ancho, podemos crear la imagen y a continuación definir los colores. Los colores son definidos en escala RGB lo cual quiere decir que tenemos que hacer nuestras mezclas de rojo, verde y azul expresando la contribución de cada uno de estos colores a partir de un número que oscila entre 1 y 255. Así, por ejemplo, el rojo seria 255,0,0 y el negro se definiría como un 0,0,0. Una forma sencilla de definir estos colores sin complicarse mucho la vida es recurrir a un programa de diseño grafico (Photoshop por ejemplo) donde podréis encontrar fácilmente una paleta de colores que esté expresada de esta forma.

A notar que, para que el dibujo pueda ser mostrado sobre cualquier color de fondo que no sea blanco, definimos el color blanco como transparente por medio de la función imagecolortransparent.

A continuación pasamos a generar el entorno donde emplazaremos el texto. Unos cuantos arcos y rectángulos nos darán el efecto deseado. El punto más delicado es, como hemos dicho, definir las coordenadas de estas figuras a partir de la variable $ancho que nos define el tamaño del gráfico.

Con nuestro esqueleto creado ya sólo nos queda introducir el texto, mostrar el dibujo y liberar la memoria empleada para su creación. Por supuesto, junto a este script, es necesario incluir el archivo .TTF correspondiente al tipo de letra que empleamos.