Qt proporciona un potente sistema de dibujo en 2D que puede utilizar la misma API para dibujar en pantallas y dispositivos de dibujo. Se basa principalmente en las tres clases QPainter, QPaintDevice y QPaintEngine. La relación entre ellos se muestra en la siguiente figura:

QPainter se utiliza para realizar operaciones de dibujo;
QPaintEngine proporciona algunas interfaces que se pueden usar para que QPainter dibuje en diferentes dispositivos;
QPaintDevice proporciona un dispositivo de dibujo, que es una abstracción de un espacio bidimensional en el que se puede utilizar QPainter para dibujar.

La operación de dibujo específica la realiza QPainter en el sistema de dibujo, que proporciona una gran cantidad de funciones altamente optimizadas para completar la mayor parte del trabajo de dibujo requerido por la programación GUI. QPainter puede dibujar todos los gráficos deseados, desde la línea recta más simple hasta cualquier otro gráfico complejo, y también puede usarse para dibujar texto e imágenes. QPainter puede dibujar sobre cualquier objeto que herede de la clase QPaintDevice.

QPainter generalmente dibuja en la función de procesamiento paintEvent () de un evento de redibujado de componente (PaintEvent) , primero crea un objeto QPainter (pincel), luego dibuja gráficos y finalmente destruye el objeto QPainter.

1. Dibujo de gráficos básicos

Se proporcionan algunas funciones convenientes en QPainter para dibujar gráficos de uso común, y también puede configurar el pincel para líneas y bordes y el pincel para relleno.

Cree una nueva aplicación Qt Gui, el nombre del proyecto es myDrawing, la clase base es QWidget y el nombre de la clase es Widget. Una vez que se complete el establecimiento, declare la función del controlador de eventos de redibujado en el archivo widget.h:

protected:
    void paintEvent(QPaintEvent *);

Luego agregue el archivo de encabezado #include <QPainter> al archivo widget.cpp.

Los beneficios de este artículo, la tarifa para recibir el paquete de materiales de aprendizaje de desarrollo Qt, video técnico, el contenido incluye (base del lenguaje C++, introducción a la programación Qt, mecanismo de ranura y señal QT, dibujo de imagen de desarrollo de interfaz QT, red QT, programación de base de datos QT, combate de proyecto QT, QSS, OpenCV, módulo rápido, preguntas de entrevista, etc.) ↓↓↓↓↓↓ Ver a continuación

1.1 Dibujar gráficos

En el archivo widget.cpp, defina la función paintEvent() de la siguiente manera:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //绘制线条
    painter.drawLine(QPoint(0, 0), QPoint(100, 100));
}

Aquí, primero se crea un objeto QPainter, usando el constructor QPainter::QPainter(QPaintDevice *device) y especificando esto como el dispositivo de dibujo, lo que significa dibujar en la pieza. Los objetos creados con este constructor comenzarán a dibujarse inmediatamente en el dispositivo, llamarán automáticamente a la función begin() y luego llamarán a la función end() en el destructor QPainter para finalizar el dibujo.

Si no desea especificar el dispositivo de dibujo al construir el objeto QPainter, puede usar el constructor sin parámetros y luego usar QPainter::begin (QPaintDevice *device) para especificar el dispositivo de dibujo al comenzar a dibujar y luego llamar a la función end() para finalizar el dibujo una vez que se haya completado. El código de la función anterior es equivalente a:

QPainter painter;
painter.begin(this);
painter.drawLine(QPoint(0, 0), QPoint(100, 100));
painter.end();

Estos dos métodos pueden completar el dibujo, sin importar qué método se use, se debe especificar el dispositivo de dibujo, de lo contrario, el dibujo no será posible. La segunda línea de código usa la función dibujarLínea() para dibujar un segmento de línea. Aquí, se usa una forma sobrecargada de la función QPainter::drawLine ( const QPoint & p1, const QPoint & p2 ), donde p1 y p2 son el punto inicial y final del segmento de línea, respectivamente. El QPoint(0, 0) aquí es el origen de la ventana, y el valor predeterminado es la esquina superior izquierda de la ventana (excluyendo la barra de título). Resultados como se muestra a continuación.

Además de dibujar líneas simples, QPainter también proporciona algunas funciones para dibujar otros gráficos de uso común, y los más utilizados se muestran en la siguiente tabla.

función	Función
dibujarArco()	dibujar arco
dibujarAcorde()	dibujar cuerda
dibujarPolígonoConvexo()	dibujar un polígono convexo
dibujarElipse()	dibujar una elipse
Dibujar linea()	dibujar líneas
dibujarPastel()	dibujar sector
DibujarPunto()	dibujar puntos
dibujarPolígono()	dibujar polígono
dibujarPolyline()	dibujar polilínea
dibujarRect()	dibujar rectángulo
dibujarRectRedondeado()	Dibujar un rectángulo redondeado

Además, colocamos el cursor en el nombre de la clase QPainter y luego presionamos el botón F1 en el teclado, luego saltará automáticamente a la página de ayuda de esta clase. Por supuesto, también puede ir al modo de ayuda e indexar directamente para encontrar el nombre de la clase. En la ayuda, podemos ver muchas funciones de dibujo relacionadas, como se muestra en la figura a continuación.

Si hacemos clic en el nombre de una función a voluntad, saltaremos al párrafo de introducción de la función. Por ejemplo, cuando hacemos clic en la función dibujarEllipse(), saltamos a la introducción de la función, y arriba se proporciona un ejemplo. Como se muestra abajo. Podemos copiar directamente el código del ejemplo en la función paintEvent() para probar el efecto.

1.2 Uso de pinceles

QPen define cómo QPainter debe dibujar líneas o contornos. Un pincel tiene atributos como estilo(), ancho(), pincel(), capstyle capStyle() y estilo de conexión joinStyle(). Primero introduzca el constructor de la clase QPen:

QPen(const QBrush &brush, qreal width, Qt::PenStyle s = Qt::SolidLine,
         Qt::PenCapStyle c = Qt::SquareCap, Qt::PenJoinStyle j = Qt::BevelJoin);

El pincel brush() se utiliza para rellenar las líneas dibujadas por el pincel.
El estilo de pincel style() define el estilo de la línea.
El estilo de la tapa de la pluma capStyle() define el final de la línea dibujada con QPainter;
El estilo de conexión joinStyle() define cómo se conectan dos líneas.
Ancho del pincel ancho() o anchoF() define el ancho del pincel. Tenga en cuenta que no hay líneas con un ancho de 0. Suponga que establece el ancho en 0, QPainter aún dibujará una línea y el ancho de esta línea es de 1 píxel.

Se pueden especificar tantos parámetros en el momento de la construcción, o se pueden especificar con la función establecida, depende completamente de sus hábitos. Varias configuraciones se pueden modificar fácilmente utilizando las funciones setWidth(), setBrush(), setCapStyle() y setJoinStyle().

estilo de pincel

Luego cambie el contenido de la función paintEvent() de la siguiente manera:

void Widget::paintEvent(QPaintEvent *)
{
    //创建画笔
    QPen pen(Qt::green, 5, Qt::DotLine, Qt::RoundCap, Qt::RoundJoin);
    //使用画笔绘制圆弧
    painter.setPen(pen);
    QRectF rectangle(70.0, 40.0, 80.0, 60.0);
    int startAngle = 30 * 16;
    int spanAngle = 120 * 16;
    painter.drawArc(rectangle, startAngle, spanAngle);
}

Después de crear el pincel anterior, use setPen() para configurar el pincel para el pintor y luego use el pincel para dibujar un arco. Una forma sobrecargada de la función de arco de dibujo es QPainter::drawArc ( const QRectF & rectángulo, int startAngle, int spanAngle ), donde los tres parámetros corresponden al rectángulo donde se debe especificar el arco, el ángulo de inicio y el ángulo de expansión, como se muestra en la figura a continuación.

QRectF:: QRectF (qreal x, qreal y, qreal ancho, qreal alto) puede usar números de punto flotante como parámetros para determinar un rectángulo, que necesita especificar las coordenadas (x, y) de la esquina superior izquierda, ancho y alto. Si solo desea usar números enteros para definir un rectángulo, puede usar la clase QRect. El valor del ángulo aquí es el grado real multiplicado por 16. En la esfera del reloj, 0 grados apunta a la posición de las 3 en punto. Si el valor del ángulo es positivo, significa una rotación en sentido contrario a las agujas del reloj. Si el valor del ángulo es negativo, significa una rotación en el sentido de las agujas del reloj. El valor de todo el círculo es 5760 (es decir, 360X16).

1.3 Uso de pinceles

La clase QBrush proporciona pinceles para rellenar gráficos. Un pincel se define usando su color y estilo (como su modo de relleno). Primero introduzca el constructor de la clase QBrush:

QBrush(const QColor &color, Qt::BrushStyle bs=Qt::SolidPattern);

Los colores utilizados en Qt generalmente están representados por la clase QColor, que admite modelos de color como RGB, HSV y CMYK. Si hay tres parámetros, entonces son los valores de los componentes rojo, verde y azul, que a menudo se denominan rgb, y el rango de valores es de 0 a 255. Por ejemplo, (255, 0, 0) aquí significa que el componente rojo es 255 y los otros componentes son 0, por lo que la salida es roja. Si hay cuatro parámetros, el último parámetro alfa es para establecer la transparencia, y el rango de valores también es 0-255, 0 significa completamente transparente y 255 significa completamente opaco. También hay 20 colores predefinidos en Qt, como se muestra en la figura a continuación.

El modo de relleno del estilo QBrush está definido por la variable de enumeración Qt::BrushStyle, que incluye relleno de patrón básico, relleno de degradado y relleno de textura.Todas las variables de enumeración se muestran en la siguiente figura. El estilo predeterminado es Qt::NoBrush (dependiendo de cómo construyas el pincel), que no rellena la forma. El estilo de relleno estándar es Qt::SolidPattern. Hay dos formas de configurar el estilo del pincel, una es usar el constructor y la otra es usar la función setstyle.

Luego cambie el contenido de la función paintEvent() de la siguiente manera:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen; //画笔
    pen.setColor(QColor(255, 0, 0));
    QBrush brush(QColor(0, 255, 0, 125)); //画刷
    painter.setPen(pen); //添加画笔
    painter.setBrush(brush); //添加画刷
    painter.drawRect(50, 50, 200, 100); //绘制矩形
}

Aquí se han creado recientemente un pincel QPen y un pincel QBrush. Entre ellos, el pincel usa la función setColor() para establecer el color, y el pincel es el color directamente configurado cuando se construye. Luego colocamos el lápiz y el pincel en el pintor, y usamos drawRect() para dibujar un rectángulo cuya esquina superior izquierda está en (50, 50), con un ancho de 200 y una altura de 100. Ejecute el programa, el efecto se muestra en la siguiente figura.

2. Relleno degradado

Los rellenos degradados también se pueden usar en pinceles. La clase QGradient se usa para especificar rellenos degradados con QBrush. Qt ahora admite tres tipos de rellenos degradados:

Un degradado lineal interpola colores entre los puntos inicial y final;
Los degradados radiales interpolan colores entre el punto focal y el anillo que lo rodea;
Los degradados cónicos (Cónico) interpolan colores alrededor del centro de un círculo.

Estos tres gradientes están representados por tres subclases de QGradient, QLinearGradient representa un gradiente lineal, QRadialGradient representa un gradiente radial y QConicalGradient representa un gradiente cónico.

(1) Gradiente lineal

QLinearGradient::QLinearGradient ( const QPointF & start, const QPointF & finalStop )

Los degradados lineales deben especificar el punto de inicio Start y el punto final finalstop , y luego igualar el área entre el punto inicial y el punto final. La posición del punto inicial es 0.0, la posición del punto final es 1.0. La posición entre ellos se establece en la relación de distancia, y luego usa la función QGRADIENT :: Setcolorat (QREAL POSITION, Const QCOLORJ & The color) está en el color especificado color en la posición especificada. Por supuesto, el valor de la posición aquí está entre 0 y 1
.

Aquí también puede usar la función setSpread() para establecer el método de difusión de relleno, es decir, especificar cómo rellenar áreas distintas del área especificada. El método de propagación está definido por la variable de enumeración QGradient::Spread, que tiene 3 valores en total, a saber, QGradiem::PadSpread, que se rellena con el color más cercano, que es el valor predeterminado; QGradient::ReflectSpread reflejará el degradado fuera del área de degradado; QGradiem::RepeatSpread repite el degradado fuera del área de degradado. Para usar el relleno degradado, puede usarlo directamente en setBrush(), luego el estilo del pincel se establecerá automáticamente en el relleno degradado correspondiente. El efecto de estos tres métodos de difusión en el gradiente lineal se muestra en la siguiente figura.

(2) Gradiente radiante

QRadialGradient::QRadialGradient ( const QPointF & center, qreal radius, const QPointF & focalPoint )

El degradado radial debe especificar el centro del círculo y el radio del radio, de modo que se determine un círculo y luego se especifique un punto focal. La posición del foco es 0, la posición del anillo es 1 y luego el color se interpola entre el foco y el anillo. El gradiente de radiación también puede usar la función setSpread() para establecer el modo de dispersión del área fuera del área de gradiente. Los efectos de los tres modos de dispersión se muestran en la figura a continuación.

(3) Gradiente cónico

QConicalGradient::QConicalGradient ( const QPointF & center, qreal angle )

El degradado cónico debe especificar el centro del punto central y un ángulo de ángulo (el valor está entre 0 y 360), y luego comenzar a interpolar el color alrededor del punto central en sentido antihorario desde el ángulo dado. El ángulo dado aquí es 0 al comienzo de la dirección contraria a las manecillas del reloj y 1 después de una rotación. La función setSpread() no tiene efecto en los gradientes cónicos.

(4) Programa de muestra

El programa de ejemplo es el siguiente:

void Widget::paintEvent(QPaintEvent *)
{
    //线性渐变
    QLinearGradient linearGradient(QPointF(40, 190),QPointF(70, 190));
    //插入颜色
    linearGradient.setColorAt(0, Qt::yellow);
    linearGradient.setColorAt(0.5, Qt::red);
    linearGradient.setColorAt(1, Qt::green);
    //指定渐变区域以外的区域的扩散方式
    linearGradient.setSpread(QGradient::RepeatSpread);
    //使用渐变作为画刷
    QPainter painter(this);
    painter.setBrush(linearGradient);
    painter.drawRect(100, 100, 90, 40);

    //辐射渐变
    QRadialGradient radialGradient(QPointF(100, 190),50,QPointF(275,200));
    radialGradient.setColorAt(0, QColor(255, 255, 100, 150));
    radialGradient.setColorAt(1, QColor(0, 0, 0, 50));
    painter.setBrush(radialGradient);
    painter.drawEllipse(QPointF(100, 200), 50, 50);

    //锥形渐变
    QConicalGradient conicalGradient(QPointF(250, 190), 60);
    conicalGradient.setColorAt(0.2, Qt::cyan);
    conicalGradient.setColorAt(0.9, Qt::black);
    painter.setBrush(conicalGradient);
    painter.drawEllipse(QPointF(250, 200), 50, 50);
}

Ejecute el programa, el efecto es el siguiente:

El artículo se transfiere desde el jardín del blog (fengMisaka): Qt 2D drawing one: dibujo de gráficos básicos y relleno de degradado