7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Renderizar texto y formas en imágenes en PHP

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Rene Soto (you can also view the original English article)

En el artículo anterior, nos enfocamos en cargar y manipular imágenes con PHP. Aprendimos a rotar, redimensionar, escalar o voltear una imagen. También aprendimos sobre los diferentes filtros y la matriz de convolución.  Esos tutoriales también cubrieron algunos usos prácticos de la libreria GD como cambiar el tamaño de todas las imágenes en un directorio o agregar marcas de agua en varias imágenes a la vez.

Además de usar GD para manipular imágenes normales, también podemos crear nuestras propias desde cero. Se pueden usar diferentes funciones en la librería para dibujar formas básicas como elipses, círculos, rectángulos, polígonos y líneas simples.  Con algunas matemáticas, estas formas pueden crear patrones agradables. También hay funciones disponibles para dibujar texto en la imagen renderizada, lo que abre muchas posibilidades.

Este tutorial te enseñará cómo dibujar formas básicas en PHP y cómo representar texto usando tu fuente favorita.

Dibujar formas básicas en PHP con GD

Aprenderemos sobre formas básicas en esta sección y luego cubriremos el grosor de línea, los pinceles y los estilos de línea más adelante.

Dibujar Lineas

Puedes dibujar una línea recta simple entre dos puntos dados usando la función imageline ($imagen, $x1, $y1, $x2, $y2, $color). El parámetro $image es un recurso de imagen que se habrá creado anteriormente utilizando funciones como imagecreatetruecolor () o imagecreatefromjpeg ().  Usaremos imagecreatetruecolor () en este tutorial para crear nuevas imágenes desde cero. La función dibujará una línea horizontal si $y1 es igual a $y2. De manera similar, dibujará una línea vertical si $x1 es igual a $x2.

Dibujar Circulos y Arcos

La función imagearc ($image, $cx, $cy, $width, $height, $start, $end, $color) puede dibujar arcos circulares utilizando $cx y $cy como su centro. Los parámetros $width y $height determinan el tamaño del arco en diferentes ejes.  Los parámetros $start y $end especifican el ángulo de inicio y final del arco en grados. Si deseas dibujar arcos completos de 0 a 360 grados, puedes usar la función alternativa imageellipse ($image, $cx, $cy, $width, $height, $color).

Dibujar Rectángulos y Polígonos

Puedes dibujar rectángulos sobre una imagen usando la función imagerectangle ($image, $x1, $y1, $x2, $y2, $color). Los valores $x1 y $y1 determinan la esquina superior izquierda del rectángulo. Los valores $x2 y $y2 determinan la esquina inferior derecha. También hay una función imagepolygon ($image, $points, $num_points, $color), que puede crear un polígono con cualquier número de lados o puntos. El parámetro $points es una matriz donde dos elementos se emparejan para obtener las coordenadas de un punto específico.

Otra función llamada imageopenpolygon() se ha agregado a PHP 7, que no dibuja una línea entre el primer y el último punto.

Juntándolo para Crear un Dibujo

En el siguiente ejemplo, hemos utilizado todas estas funciones para crear un dibujo lineal con una cabaña, el sol y el suelo.

Lo importante aquí es simplemente averiguar el valor de las diferentes coordenadas. Quería dibujar todo en relación con el tamaño de la imagen original, así que usé las variables $img_height e $img_width para calcular las coordenadas de diferentes puntos.

Line Drawing in PHP GDLine Drawing in PHP GDLine Drawing in PHP GD

Control del Grosor de Línea, Estilo y Rellenos de Color

La imagen de arriba tiene un par de problemas como líneas muy finas y sin colorear. Todos estos problemas pueden solucionarse fácilmente mediante funciones como imagesetthickness() e imagefilledrectangle().

Grosor de la línea

La función de imagesetthickness($image, $thickness) establece el grosor de las líneas renderizadas al dibujar rectángulos, polígonos, arcos, etc. Por ejemplo, si se configura $thickness a 5, cualquier figura dibujada utilizando imagerectangle(), imagearc(), imagepolygon(), etc. 5 píxeles de espesor.

Dibujando Formas Rellenas

Cada función de dibujo también tiene una versión de color rellena que llena esa figura en particular con un color determinado. Por ejemplo, imagefilledrectangle() llenará el rectángulo dibujado con el color dado.

Utilizando Pinceles

Una función GD muy útil es imagesetbrush ($image, $brush). El parámetro $brush en esta función es solo otro recurso de imagen que se puede usar para dibujar líneas.  Por ejemplo, puedes usar un dibujo vectorial transparente de una flor como un pincel para agregar bonitos patrones de flores a tu imagen. El fragmento de código que se proporciona a continuación fue escrito para usar la imagen de una nube como un pincel al dibujar un punto. Esto agrega una sola nube en nuestro cielo.

Encontré esta imagen de una nube en Pixabay y la reduje a un tamaño apropiado para nuestro proyecto.

El código completo para la imagen de la choza se da a continuación. Simplemente hemos agregado dos versiones de cada figura, una para dibujar el contorno y la otra para completar el color.

Este es el resultado final del código PHP GD anterior.

PHP GD Filled Hut ColorPHP GD Filled Hut ColorPHP GD Filled Hut Color

Renderizar Texto en Imágenes 

PHP GD viene con cuatro funciones diferentes que te permiten representar múltiples caracteres o solo un carácter en una dirección horizontal o vertical. Estas funciones son imagechar(), imagecharup(), imagestring() e imagestringup(). Todos ellos aceptan los mismos seis parámetros, por lo que solo discutiremos la función imagechar() aquí. 

El parámetro $font imagechar ($image, $font, $x, $y, $string, $color) es simplemente el tamaño del texto representado. Solo acepta valores enteros del 1 al 5. El parámetro $string es el texto que desea procesar. Si pasa una cadena de caracteres múltiples a las funciones char, solo se representará el primer carácter en la imagen. Las funciones imagecharup() e imagestringup () representarán el texto verticalmente de abajo hacia arriba. 

Cuando se trata de representar texto, las cuatro funciones que discutimos anteriormente son muy limitadas. Encontrarás que incluso el valor de tamaño de fuente más grande es demasiado pequeño para el uso normal. 

 Afortunadamente, GD también tiene una función imagettftext ($image, $size, $angle, $x, $y, $color, $fontfile, $text) que puede representar el texto en cualquier fuente que desee.  El parámetro $fontfile se usa para especificar la ruta a la fuente TrueType que desea usar para mostrar el texto. Los parámetros $x y $y determinan la posición inicial del texto representado.

El siguiente ejemplo utiliza todas estas funciones para crear algunos efectos de texto agradables.

Como puedes ver, hemos renderizado el mismo texto con la misma fuente en posiciones ligeramente diferentes para crear algunos efectos como la sombra del texto básico.  Lo importante a tener en cuenta es que el texto representado por cualquier función de texto ocultará completamente el texto debajo en caso de que se superponga. Aquí está la imagen final obtenida después de ejecutar el código anterior.

PHP GD TextPHP GD TextPHP GD Text

Pensamientos Finales

El objetivo de este tutorial era familiarizarte con las diferentes funciones de GD para dibujar formas básicas desde cero en PHP. Con la ayuda de un poco de matemáticas, podrás usar estas funciones para crear formas más complicadas como polígonos regulares, rectángulos redondeados, etc. 

PHP GD también tiene un par de funciones muy útiles para representar texto en una imagen. El uso de una fuente agradable asegurará que el texto representado no se vea extraño cuando se coloca en imágenes normales cargadas desde diferentes rutas de archivo.

¿Creaste efectos de texto más sofisticados en PHP? Por favor, comparte con nosotros en los comentarios

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.