Python en Español

Tutorial de dibujo con PyQt5 (APIs de dibujo)

En este tutorial, aprenderemos cómo dibujar gráficos vectoriales en PyQt5.

En Python, el módulo PyQt5 es el módulo más fácil que puedes utilizar para dibujar, como veremos a continuación.


Antes de comenzar, vamos a crear una ventana con PyQt5 donde dibujaremos nuestros gráficos.

 

Crear una ventana de PyQt5

Para crear la ventana, tenemos que importar los siguientes módulos:


Ahora crea la clase window que nos proporcionará una ventana para nuestra aplicación en la cual podemos tener una barra de menú, barra de estado, gráficos, etc.

Dentro de esta clase, tendremos dos métodos; el primer método es un constructor al que se llama automáticamente cuando se crea el objeto de la clase.

El segundo método llamado InitWindow, establece los parámetros que definimos en nuestro constructor, por ejemplo, el título de la ventana de nuestra aplicación, la longitud y el ancho, etc.


En el constructor, los parámetros se inicializan y en el método InitWindow (), los parámetros se aplican a la ventana utilizando la función setGeometry ().

Ahora los pasos principales: Crea una instancia de QApplication, y el objeto de la clase de Window luego ejecuta la ventana.


Nuestra ventana ya está lista y podemos crear gráficos fácilmente:

Tutorial de dibujo con PyQt5

Dibuja un circulo

Para dibujar gráficos, necesitamos importar los siguientes módulos:


El QPainter proporciona varias funciones para dibujar las formas básicas. Por ejemplo, líneas, rectángulos, etc. Los módulos QBrush proporcionan colores, texturas, etc. para una forma. El QPen define el funcionamiento de QPainter y es así como QPainter dibuja o diseña una forma.

  1. El primer paso es definir el método donde se realizará todo el trabajo de dibujo, el método es paintEvent():

def paintEvent(self, event):

  1. Crear un objeto painter:

painter = QPainter(self)

  1. Ahora establece el QPen en el objeto painter y asigna el color y el estilo a la línea del círculo:

painter.setPen(QPen(Qt.green,  8, Qt.DashLine))

El valor 8 es el ancho de la línea.

  1. Dibuja el círculo usando drawEllipse(x_axis, y_axis, width, height) El método drawEllipse () se llama usando el objeto painter que creamos en el paso 2. Define los ejes x e y donde se colocará el círculo en la ventana y el tamaño (altura y ancho).

painter.drawEllipse(40, 40, 400, 400)

La salida será la siguiente:

Dibuja un circulo

En este ejemplo, hemos usado el DashLine como estilo de línea, también podemos usar SolidLine para crear un círculo continuo con líneas sólidas de la siguiente manera:

painter.setPen(QPen(Qt.green,  8, Qt.SolidLine))

Dibuja un círculo de línea continua

Podemos tener los siguientes estilos de línea:

Estilos de línea PyQt5

Esta imagen se extrae de la Documentación Oficila de QPen.


Dibuja un círculo relleno

Puedes dibujar un círculo con relleno usando QBrush. También puedes establecer el color del patrón y el estilo del patrón.

  1. Coloca el pincel como colocamos el lápiz en la última sección usando el objeto de painter:

painter.setBrush(QBrush(Qt.red, Qt.SolidPattern))

Dibuja un círculo relleno

La función completa PainterEvent se verá de la siguiente forma:


Hay muchos otros patrones que podemos usar, por ejemplo, el patrón cruzado:

painter.setBrush(QBrush(Qt.red, Qt.CrossPattern))

El patrón cruzado

Puedes tener los siguientes patrones para rellenar el círculo o cualquier otra forma:

Patrones para rellenar el círculo

Esta imagen se extrae de la Documentación Oficial de QBrush.


Dibuja un semi circulo

Para crear un semicírculo, usaremos el método drawArc (). Sigue los pasos a continuación:

  1. Crea un objeto painter:

painter = QPainter()

  1. Luego activa el objeto painter utilizando el método begin ():

painter.begin(self)

  1. Ahora utiliza el método setRenderHint () que devuelve el indicador que especifica las sugerencias de representación establecidas para el objeto de painter.

painter.setRenderHint(QPainter.Antialiasing)

  1. Establecer el pen dibujar el arco:

painter.setPen(QtCore.Qt.green)

  1. Establecer el brush:

painter.setBrush(QtCore.Qt.white)

  1. Finalmente, dibuja el arco:

painter.drawArc(100, 70, 300, 300, 0 * 16, 180 * 16)

Los dos primeros parámetros son los ejes x e y respectivamente. Luego tenemos el ancho y el tamaño del arco, luego el ángulo de inicio. Al final, hemos definido el ángulo de expansión.

El resultado se muestra a continuación:

Dibuja un semi circulo

Puedes crear un semicírculo invertido cambiando los 180 grados a -180 grados:

painter.drawArc(100, 70, 300, 300, 0 * 16, -180 * 16)

Dibuje medio círculo al revés

Para crear un semicírculo vertical:

painter.drawArc(100, 70, 300, 300, 90 * 16, 180 * 16)

Crear un semicírculo vertical

Dibuja una línea

En esta sección, aprenderás a dibujar una línea. Puedes dibujar una línea usando la función drawLine().

La función drawLine () dibuja una línea desde el punto a al punto b. Sigue los pasos a continuación:

  1. Crea un objeto painter:

painter = QPainter()

  1. Ahora active el objeto painter usando el método begin ():

painter.begin(self)

  1. Ahora utiliza el método setRenderHint () que devuelve el indicador que especifica las sugerencias de representación establecidas para el objeto painter.

painter.setRenderHint(QPainter.Antialiasing)

  1. Establece el pen para dibujar la línea:

painter.setPen(QtCore.Qt.red)

  1. Establece el brush brush:

painter.setBrush(QtCore.Qt.white)

  1. Por ultimo, traza la línea:

painter.drawLine(0, 0, 200, 200)

El resultado será el siguiente:

Dibuja una línea


Dibuja una línea horizontal

Puedes dibujar una línea horizontal usando el método drawLine ():


El código es el mismo que utilizamos en la sección anterior, pero tienes que organizar los puntos en la función drawline() para obtener una linea horizontal. Esto generará el siguiente resultado:

Dibuja una línea horizontal

De manera similar, podemos crear una línea vertical usando los siguientes puntos en la función drawLine ():

painter.drawLine(100, 100, 100, 400)

El resultado será el siguiente:

Dibujar linea vertical

Dibujar una flecha

Para dibujar una flecha tienes que dibujar tres líneas, una será una línea horizontal y las dos líneas restantes serán para la cabeza de la flecha. Estas líneas se dibujarán utilizando la función drawLine (). Considera el siguiente código:


La primera función drawLine () es para la línea horizontal, la segunda función crea la parte inferior de la cabeza de flecha y la tercera función crea la parte superior de la cabeza de flecha.

Dibujar una flecha

Dibujar un arco

Puedes dibujar un arco usando el método drawArc (). La sintaxis de la función drawArc () es la siguiente:

drawArc(x_axis, y_axis, width, length, startAngle, spanAngle)

En el siguiente ejemplo, crearemos un arco de 0 grados a 90 grados:


Esto creará un arco como podemos ver a continuación:

Dibujar un arco


Dibujar una curva

Para dibujar una curva, debes utilizar el módulo QPainterPath.

En primer lugar, importa el módulo:

from PyQt5.QtGui import QPainterPath

Ahora crea un objeto QPainter y un objeto QPainterPath dentro del método paintEvent ():


Luego repite los pasos anteriores para activar el painter, los rendering hitns para el objeto painter y establecer el pen y el brush:


Luego utiliza la función moveTo () del módulo QPainterPath para moverte al eje x e y en la ventana:

path.moveTo(40, 40)

Luego usa la función cubicTo () de la función QPainterPath que crea una curva entre la posición actual y el punto final (x, y).

path.cubicTo(40, 40, 150, 250, 250, 40)

Finalmente, utiliza el método drawPath () y pasa el objeto de trayectoria para dibujar la curva.

La salida será la siguiente:

Dibujar una curva

Dibujar un elipse

Puedes dibujar una elipse utilizando la función drawEllipse () como hicimos nosotros al dibujar el círculo. Solo cambia los puntos de forma correspondiente y obtendrás el elipse. Considera el siguiente código:


Dibujar un elipse

Dibujar un rectángulo

Para dibujar un rectángulo utilizaremos el método drawRect () del módulo QPainter.

En primer lugar, crea el objeto QPainter en la función paintEvent:


Después del objeto painter, utilizaremos el método setPen () para establecer el color del rectángulo y el estilo de línea que es una línea continua en nuestro ejemplo.

Luego solo utiliza el método drawRect () para dibujar el rectángulo en la ventana. El código anterior generará el siguiente resultado:

Dibujar un rectángulo

Podemos usar otros estilos de línea, por ejemplo, DotLine, que será el siguiente:

painter.setPen(QPen(Qt.black,  5, Qt.DotLine))

Dibuja un rectángulo de línea de puntos


Dibujar un rectángulo lleno

Puedes dibujar un rectángulo relleno utilizando la función setBrush () de la siguiente manera:


La salida será la siguiente:

Draw a filled rectangle

Dibujar un triángulo

Para dibujar un triángulo, puedes utilizar la función lineTo () del módulo QPainterPath.

Considera el siguiente código:


En el código anterior, creamos objetos de las respectivas clases / módulos. A continuación, activa el painter y los render hints. Luego, ajusta el pen(el color del pen).

Por último, utilizamos tres funciones lineTo () en diferentes puntos para crear tres líneas de modo que se unan como se muestra a continuación:

Dibujar un triángulo

Dibujar un triángulo relleno

Puedes usar el método setBrush () para dibujar un triángulo relleno de la siguiente manera:

painter.setBrush(QtCore.Qt.blue)

La salida se muestra a continuación:

Dibujar un triángulo relleno

Dibujar un gradiente

Usaremos LinearGradient y para esto, importaremos el módulo QLinearGradient.


Hemos creado un objeto de degradado y hemos pasado los valores al módulo QLinearGradient. A continuación, pasamos los valores del color al módulo QLinearGradient y al final, establecemos nuestro brush con el objeto de degradado.

La salida será así:

Dibujar un gradiente

Dibujar un polígono

Para dibujar un polígono, puedes utilizar el método QPolygon del módulo QPolygon. Primero, debes importar el QPoint de QtCore y QPolygon de QtGui como se muestra en el siguiente código:


En el código a continuación, declaramos una arreglo de puntos que se pasa al método QPolygon () y luego usamos el método drawPolygon () para dibujar un polígono.


La salida es la siguiente:

Dibujar un polígono

Dibujar en imagen

Para esto, hemos importado todo desde los módulos QtWidgets, QtGui y QtCore de la siguiente manera:


Ahora el método paintEvent:

  1. Creamos un objeto QPainter.
  2. Luego, para importar la imagen, hemos creado un objeto de QPixmap y hemos pasado el enlace a la imagen. Nuestra imagen se ve así:
    Shape
  3. Ahora tenemos que mostrar la imagen en la ventana, usamos la función drawPixmap().
  4. Establecemos el pen (el color de línea y el estilo de línea para el rectángulo).
  5. Dibuja el rectángulo utilizando drawLine () y se dibujará en la parte superior de la imagen.


La salida es la siguiente:

Dibujar en imagen

 

Dibujar imágenes vectoriales es muy simple en PyQt5. Espero que encuentres el tutorial útil.

Gracias.

Mokhtar Ebrahim
Estoy trabajando como administrador de sistemas Linux desde 2010. Soy responsable de mantener, proteger y solucionar problemas de servidores Linux para múltiples clientes de todo el mundo. Me encanta escribir guiones de shell y Python para automatizar mi trabajo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *