Qt - Graficos en 2D QPainted

Ahora vamos a ver un ejemplo sencillo de como crear graficos  2D en Qt. Para esto haremos uso de la clase QPainter y del evento paintEvent.

Para esto ya debemos tener un proyecto vacio creado y dentro del proyecto una ventana.

Dentro del archivo de cabecera incluimos las siguientes lineas de código.

#include <QPaintEvent>//para el evento

#include <QPainter>//para el pintor con el cual crearemos nuestros gráficos.

Entonces la parte superior de nuestro archivo quedaria así.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H


#include <QMainWindow>
#include <QPaintEvent>
#include <QPainter>

En la seccion de protected  colocamos 
 void paintEvent(QPaintEvent *) ;//para implementar la creación

 de los gráficos dentro del evento.

class MainWindow : public QMainWindow
{
    Q_OBJECT


public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();


private:
    Ui::MainWindow *ui;


 
protected:
   void paintEvent(QPaintEvent *) ;

};

 Ahora vamos a nuestro archivo cpp a implementar dentro del evento paint.

void MainWindow::paintEvent(QPaintEvent *)
{
   
    QPainter pintor(this);  


    pintor.translate(300,300);
 
 
    pintor.drawRect(0,0,100,100);





} 

Explicacion del código.

QPainter pintor(this).

Aqui tenemos nuestro objeto pintor que recibe en su constructor 

el dispositivo en donde se va a realizar el pintado.En este caso será la misma 

ventana, por eso le pasamos "this", haciendo referencia a esta misma clase.

   pintor.translate(300,300);

Aqui le indicamos que se realizará una transformación, concretamenta una 

traslacion de 300 unidades en x y 300 unidades en y.

 pintor.drawRect(0,0,100,100);

Aqui le indicamos que dibuje un rectangulo en donde:

 
 pintor.drawRect(x,y,ancho,alto);

Si ejecutamos el codigo veremos lo siguiente.

Si comentamos la linea   pintor.translate(300,300). Entonces se veria así.

  Esto se debe a que por defecto el tamaña y las coordenas de ventana 

de pintado es el mismo que la ventana que la contiene(No confundir). Para

esto pueden revisar mas a fondo sobre viewport y window(esto referente a graficos

 por computadora). Entonces el origen (0,0) estaria en la ezquina supeior

 izquierda(desde mi perspectiva)

Con lo cual para traslador un objeto tanto dentro de la parte visible, 

tanto "x" como "y" deberan ser positivos.

¿Que pasará si a la figura que tenemos le agregamos una rotación?

Empezaremos con 10 grados, luego con 20 y finalmente con 45.

Comentamos la linea de traslacion y deberia quedar así.

void MainWindow::paintEvent(QPaintEvent *)
{
   
    QPainter pintor(this);  


    // pintor.translate(300,300);
    pintor.rotate(10);
 
    pintor.drawRect(0,0,100,100);


} 

Resultado de 10 grados.




Resultado de 20 grados



 




Resultado de 45

 
 
 
 
 Como vemos esta rotando segun la coordenado (0,0). No esta rotando desde su
 centro.
Si al momento de crear el rectangulo cambiamos las coordenadas por 300,300.
 
 
void MainWindow::paintEvent(QPaintEvent *)
{
   
    QPainter pintor(this);  


    // pintor.translate(300,300);
    pintor.rotate(45);
 
    pintor.drawRect(300,300,100,100);


} 
 

 Resultado en 45 grados 

Como vemos tiene el mismo angulo de rotacion, pero está mas abajo. Esto 

ocurre porque toma como centro de giro el eje de coordenadas (0,0).

Si quisieramos que rote segun su centro de masa, entonces deberiamos ubicar 

su centro de masa en las coordenadas (0,0). Esto se puede hacer de dos formar.

Forma 1: 

Cambiando los parametros de la ventana del pintor y colocando desde su creacion 

en el origen.

pintor.setWindow(-50,-50,100,100);

El -50,-50 ahora sera la esquina superior izquierda y la ventana ahora

 mide 100 de alto, por 100 de ancho.

Aqui tenemos un ejemplo en donde se estipuló que la esquina superior izquierda es 

la coordenada (-50,-50) y como tiene 100 de ancho por 100 de alto, la coordenada

de la esquina inferior derecha es (+50,+50).

 Si se desea ubicar el rectangulo en el centro (coodenada 0,0), debo restar a la 

coordena "X" menos la mitad del largo y  a la coordenada "Y" menos la mitad del alto. 

Es decir,Si mi rectangulo será de 10x10, entonces la mitada es 5 y 0 - 5 es igual 

a -5 para "X" y para "Y" seria igual a -5. 

pintor.drawRect(-5,-5,10,10); 

Ahora aplicamos la rotación.

void MainWindow::paintEvent(QPaintEvent *)
{

   
    QPainter pintor(this);


   pintor.setWindow(-50,-50,100,100);
 
    pintor.rotate(45);
    pintor.drawRect(-5,-5,10,10);




    

} 

Forma 2:

Trasladando al origen, luego rotar y nuevamente trasladar a la posicion inicial.

void MainWindow::paintEvent(QPaintEvent *)
{
  
    
    QPainter pintor(this);


 
     pintor.translate(150,150);// se posiciona en la ubicacion inicial
     pintor.rotate(angulo);//tercero rota
    pintor.translate(-150,-150);//segundo se traslada al origen
    pintor.drawRect(100,100,100,100);//primero se dibuja




    

}

Como vemos esto opera como una pila. La ultima instrucción es la primera 

en realizarse.

Resultado.

Descargar código fuente

Para profundizar mas sobre gráficos por computadora,

 les recomiendo el siguiente libro graficos por computadora con opengl