Notas Espacio Programación

Esquinas redondeadas más simples

La técnica más común para redondear esquinas en PHP consiste en tomar imágenes prefabricadas y aplicarlas sobre la imagen original.

La verdad es que, aunque produce buenos resultados, prefiero algo más standalone y que no haga trabajar tanto al servidor.

Hay una función muy útil, perteneciente a la librería GD de PHP, que puede ayudarnos en esta tarea. Se trata de imagefilltoborder.

Vamos a citar el manual para ver qué hace exactamente:

Descripción



Veamos una de las posibles aplicaciones de esta función:



El código utilizado es el siguiente:


Vemos que si la super global $_GET['im'] está definida, el archivo entrega la imagen procesada y sale (exit), y si no, muestra el formulario, que tiene un input type image cuyo atributo src es el mismo archivo pero con la variable get im siempre definida. El agregado de $_SERVER['QUERY_STRING'] es para recoger las coordenadas x e y que envía siempre un input type image cuando hacemos click sobre él, y que en este caso son usadas por imagefilltoborder para realizar el relleno.

¿Y qué tiene esto que ver con las esquinas redondeadas?

Es que básicamente podemos usar la misma técnica.
Los pasos serían:
1) Desde el punto 0,0 de nuestra imagen dibujamos una línea horizontal cuya medida sea igual al radio del borde que vamos a aplicar (imageline).
2) Hacemos lo mismo, pero esta vez con una línea vertical (imageline).
3) Dibujamos un arco que una los extremos separados de las líneas que acabamos de dibujar (imagearc).

Es importante que esos tres elementos tengan el mismo color, de manera que formen una figura cerrada de borde monocromo.

Veamos cómo sería en código:


Este sería el resultado de ese código:


Como vemos, ya tenemos lo mismo que en nuestro ejemplo del mapa: una superficie aislada por un borde, que podemos rellenar usando la función imagefilltoborder. Sólo nos queda definir un punto que se encuentre dentro de ella y rellenar a partir del mismo. El punto ubicado en las coordenadas 2,2 podría ser una buena opción:


Resultado:


Y listo, haciendo lo mismo con los bordes restantes y algunas modificaciones para que sea más reusable, podemos obtener algo como esto:


Que podemos usar de esta manera para mostrar sólo algunas esquinas redondeadas y el radio por defecto:

Resultado:




O de esta otra para mostrar todas las esquinas redondeadas y otro radio:

Resultado:




Y si quisiéramos aplicarlo sobre un fondo de color #CCCCCC, por ejemplo, podríamos usarlo asi:

Resultado: