Comandos de Dibujo en PyQT5

Con PyQt5 como con cualquier otro framework podemos dibujar figuras ya sea de las comúnmente conocidas o nuestras propias creaciones, ya hacer necesitamos manejar el evento paintEvent y crear un objeto QPainter para dibujar, los comandos de dibujo se deben ubicar entre las llamadas a los métodos begin y end.

En tutoriales anteriores vimos cómo crear la ventana, para este ejemplo necesitamos manejar el evento paintEvent que se produce cuando la ventana requiere dibujarse, por ejemplo al cambiar de tamaño la ventana.

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.resize(1280, 720)
        self.setWindowTitle('PyQT5 Paint')

    def paintEvent(self, event):
        qp = QPainter()
        qp.begin(self)
        # ubicar aqui los comandos de dibujo
        qp.end()

Colocar Imagen de Fondo


Como primer punto veremos cómo pintar una imagen sobre el fondo de la ventana, necesitaremos un objeto QPixmap para cargar y almacenar la imagen que luego pintaremos sobre el fondo de la ventana del QWidget, usaremos en método QPainter.drawPixmap para dibujar el pixmap, indicamos como primer parámetro un QRect(0, 0, 1280, 720) para establecer la ubicación y dimensiones de la imagen, si deseamos que la imagen cambie de tamaño con la ventana pasamos en QRect obtenido del objeto event.

def paintEvent(self, event):
    qp = QPainter()
    qp.begin(self)
    self.drawImage(event, qp, 'image/image.jpg')
    qp.end()

def drawImage(self, event, qp, image):
    pixmap = QPixmap(image)
    qp.drawPixmap(event.rect(), pixmap)
    # qp.drawPixmap(QRect(0, 0, 1280, 720), pixmap)

imagen de fondo pyqt5

Dibujar Texto


Lo siguiente que veremos será como pintar texto, para ello usaremos el método drawText para indicar la posición donde deseamos dibujar el texto, la alineación del texto (derecha, izquierda, superior, inferior, centrado) y finalmente indicamos el mensaje de texto que dibujaremos, podemos cambiar ciertos parámetros como el color de texto, la fuente, etc.

def drawText(self, event, qp, text):
    qp.setPen(QColor(0, 255, 255))
    qp.setFont(QFont('Consolas', 48))
    qp.drawText(event.rect(), Qt.AlignCenter, text)

dibujar texto pyqt5

Dibujar Puntos


Una de las formas más básicas que podemos dibujar son los puntos, el método QPainter.drawPoint(x, y) realiza esta tarea donde (x, y) son las coordenadas donde se dibujará el punto, antes de dibujar vamos a establecer un QPen para definir la pluma con que se dibujará, cambiamos el color estableciendo las componente RGB o RGBA, establecemos el width a 3 para cambiar el tamaño del punto.

def drawPoint(self, event, qp):
    pen = QPen(Qt.red)
    pen.setWidth(3)

    qp.setPen(pen)
    qp.drawPoint(event.rect().width() / 2, event.rect().height() / 2)


Dibujar Líneas


QPainter.drawLine(p1, p2) dibuja la línea deseada, p1 indica el punto inicial de la línea, p2 en punto final, seguimos usando el QPen vemos como establecer el color indicando las componentes RGBA que pueden estar entre [0, 255] y lo hacemos también usando el método setNamedColor(‘#c2c2c2’) que permite establecer el color usando la notación hexadecimal, vemos también como cambiar el estilo de línea, entre los que tenemos: Qt.DashLine, Qt.DashDotLine, Qt.DotLine, Qt.DashDotDotLine, etc.

def drawLine(self, event, qp):
    pen = QPen()
    pen.setWidth(3)
    pen.setColor(QColor(128, 250, 25, 255))
    pen.setStyle(Qt.DotLine)

    qp.setPen(pen)
    qp.drawLine(QPoint(10, 10), QPoint(1280 - 10, 10))

    # Dibujar segunda linea
    color = QColor()
    color.setNamedColor('#c2h6b4')

    pen.setColor(color)
    pen.setStyle(Qt.DashLine)

    qp.setPen(pen)
    qp.drawLine(QPoint(10, 10 + 20), QPoint(1280 - 10, 10 + 20))

estilos linea pyqt5

Dibujar Figuras


QPainter cuenta con mucho métodos para el dibujo de figuras como: rectángulos, círculos, polígonos, elipses, etc., en este ejemplo veremos el rectángulo con esquinas redondeadas y la elipse, usaremos drawRoundedRect para dibujar el rectángulo primero indicamos con un QRect la posición y dimensiones del mismo y los dos últimos parámetros establecer el arco de las esquinas, el método drawEllipse dibuja la elipse indicamos la posición y las dimensiones, como el ancho y la altura en este tutorial son iguales se dibujará un círculo.

Vemos también la clase QBrush que nos sirve para definir la forma como se pintara el fondo de nuestras figuras, podemos establecer un color sólido, un gradiente, o un patrón de textura, usaremos QBrush.setTexture para establecer el QPixmap que pintara el fondo de la figura, mientras que QBrush.setStyle nos servirá para indicar un patrón definido.

def drawShape(self, event, qp):
    pen = QPen(Qt.yellow)
    pen.setWidth(3)
    # rellenar fondo con patron de imagen
    brush = QBrush()
    brush.setTexture(QPixmap('icon.ico'))
    # establecer el QBrush
    qp.setBrush(brush)
    qp.setPen(pen)
    qp.drawRoundedRect(QRect(50, 50, 200, 150), 15, 15)
    # utilizar un patron predefinido
    brush.setStyle(Qt.DiagCrossPattern)
    qp.setBrush(brush)
    qp.drawEllipse(350, 50, 150, 150)

pyqt5 draw shape brush
Existen muchas otras métodos de dibujo de la clase QPainter no podemos ver cada uno de ellos en un solo tutorial, con lo aprendido podrás deducir por tu cuento como usarlos y modificar los parámetros necesarios para obtener el dibujo deseado.

Puedes ver un ejemplo bastante detallado en la carpeta de ejemplos instalada con PyQT-5: PyQt5\examples\painting\basicdrawing\basicdrawing.py

GitHub: Dibujar con PyQT5

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API