Buscar en el Blog

martes, 18 de octubre de 2016

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.





Para profundizar mas sobre gráficos por computadora,
 les recomiendo el siguiente libro graficos por computadora con opengl


No hay comentarios:

Publicar un comentario en la entrada

Google+ Seguidores