Este documento introduce los gráficos en QT. Explica que los gráficos se crean utilizando una escena gráfica (QGraphicsScene) a la cual se agregan objetos gráficos. Luego, la escena se visualiza usando un widget QGraphicsView. También describe las clases para crear primitivas gráficas como rectángulos, elipses y líneas, y cómo establecer sus colores y estilos.

1. Introducción a los gráficos en QT
Informática II
U.T.N.F.R.P.

2. Gráficos
Hasta ahora hemos estado desarrollando aplicaciones que incorporan widgets
para interactuar con el usuario.
Además de los controles estándares con los que estamos acostumbrados a
trabajar en windows (botones, etiquetas, cuadros de texto, etc.) Qt incorpora un
sistema de representación gráfica con el que podemos lograr gráficos.
Hasta la versión 3 de Qt, la metodología para trabajar con gráficos era a través de
una clase denominada QCanvas que representaba un área gráfica en la pantalla.
A partir de Qt 4 se ha incorporado un sistema de representación de gráficos de
más alto nivel que entre otras cosas permite la gestión de la escala de los gráficos
de un modo más simple.

3. Gráficos
Vistas y gráficos
La nueva implementación de Qt considera que los gráficos parten de una escena
(QGraphicsScene) en la cuál se agregan diferentes objetos que representan
formas básicas.
Cada uno de estos objetos tiene un posicionamiento dentro de la escena dado a
través de un sistema similar al de las coordenadas cartesianas, teniéndose el
mismo sentido para el eje x y el sentido inverso para el eje y.
Una de las ventajas de la nueva
implementación de Qt es que las
coordenadas de la escena son
independientes de la representación que se
ve en la pantalla. Por lo cual, es posible
trabajar con valores negativos y también de
tipo real.

4. Gráficos
Vistas y gráficos
Una vez formada la escena con todos los elementos de interés, es posible
visualizarla utilizando el widget QGraphicsView.
Entre las características de este widget se encuentra la posibilidad de establecer el
área de representación de interés dentro de una escena, por lo que, una escena
puede ser de mayor o menor tamaño que el área que se visualiza.
Entonces la metodología de trabajo para lograr gráficos personalizados es:
• Generar una escena con todos los elementos requeridos para una representación
• Asociar la escena a una vista.

5. Gráficos
Elementos gráficos
Una escena es representada con un color de primer plano y un color de fondo con los
que se dibujan los objetos gráficos (tales como líneas, círculos, rectángulos, etc.).
Los bordes de estas figuras son trazados utilizando un color y estilo de primer plano
que en general es establecido a través de un lápiz representado por un objeto de la
clase QPen.
Esta clase incorpora entre otros los siguientes atributos de interés:
• Width: establece el grosor con el que se dibujarán las líneas.
• Style: enumeración que permite establecer el estilo de la línea, pudiendo
tomar alguno de los siguiente valores:
Nombre de la constante Valor Descripción
Qt::NoPen 0 No se dibuja ningún borde
Qt::SolidLine 1 Línea sólida
Qt::DashLine 2 Línea formado por segmentos
Qt::DotLine 3 Línea de puntos
Qt::DashDotLine 4 Línea que alternadamente incorpora segmentos y puntos
Qt::DashDotDotLine 5 Línea de segmento seguido por dos puntos
Qt::CustomDashLine 6 Estilo personalizado

6. Gráficos
Elementos gráficos
En lo que respecta al relleno de figuras y fondo de escenas, el mismo es establecido
a través de objetos de la clase QBrush.
Esta clase incorpora diferentes atributos que permiten indicar las características del
fondo deseado. Entre sus atributos se encuentran:
• Color: que indica el color que se utilizará en el relleno.
• Style: que establece diferentes patrones de según el valor asignado

7. Gráficos
Colores
Cómo ya vimos, hay un conjunto de colores predefinidos que se pueden
utilizar en el espacio de nombres Qt (Qt:red, Qt:blue, Qt:balck, etc.)
Además es posible definir un color a partir de sus componentes de color
Rojo, Verde y Azul. Para esto se debe utilizar el método estático fromRgb
de la clase QColor dándole como argumento un valor en el intervalo
[0;255] para indicar la componente de color deseada.
Ejemplo:
QBrush relleno;
relleno.setStyle(Qt::SolidPattern);
relleno.setColor(QColor::fromRgb(200, 20, 100));

8. Gráficos
Primitivas gráficas
Los elementos que constituyen un elemento de un gráfico son objetos de
clases derivadas de la clase base QGraphicsItem, la cual incorpora un
conjunto de métodos genéricos aplicables a todos los elementos gráficos.
Las clases derivadas que corresponden con primitivas gráficas son:
QGraphicsEllipseItem: representa un elipse o círculo
QGraphicsLineItem: representa una línea que une dos puntos.
QGraphicsPathItem : representa un trayecto
QGraphicsPixmapItem: representa una imagen
QGraphicsPolygonItem: representa un polígono definido por un
conjunto de puntos
QGraphicsRectItem: representa un rectángulo o cuadrado.
QGraphicsSimpleTextItem: representa un texto simple.
QGraphicsTextItem: representa un texto con funcionalidades
avanzadas entre las que se cuenta la posibilidad de representar un texto
html.

9. Gráficos
Primitivas gráficas
Cada una de las clases anteriores puede ser utilizada para crear un
objeto que luego es agregado a la escena de interés a través del método
addItem.
Más allá de esto, es posible agregar directamente los objetos utilizando
métodos de la clase QGraphicsScene que crean nuevos objetos y los
agregan automáticamente a la escena retornando un punto al nuevo
objeto creado.

10. Gráficos
Primitivas Gráficas
QGraphicsRectItem *QGraphicsScene::
addRect(qreal x1, qreal y1, qreal an, qreal al,
borde = QPen(), relleno = QBrush())
Dibuja un rectángulo con coordenadas del ángulo superior izquierdo (x1, y1) y ancho y alto
establecidos por an y al. Dibuja su borde con el lápiz dado y lo rellena con el los parámetros
indicados en relleno. Si estos dos últimos argumentos se omiten, se crea un nuevo objeto con los
valores dados por defecto.
(X1, Y1)
al
an
Ej0

11. Gráficos
Primitivas Gráficas
QGraphicsEllipseItem *QGraphicsScene::
addEllipse(qreal x1, qreal y1, qreal an, qreal al,
borde = QPen(), relleno = QBrush())
Dibuja una elipse circunscripta en un rectángulo con coordenadas del ángulo superior izquierdo
(x1, y1) y ancho y alto establecidos por an y al. Dibuja su borde con el lápiz dado y lo rellena con
el los parámetros indicados en relleno. Si estos dos últimos argumentos se omiten, se crea un
nuevo objeto con los valores dados por defecto.
(X1, Y1)
al
an
Ej1

12. Gráficos
Primitivas Gráficas
QGraphicsLineItem *QGraphicsScene::
addLine(qreal x1, qreal y1, qreal x2, qreal y2,
color = QPen)
Dibuja una línea desde el punto indicado por los argumentos (x1,y1) hasta el punto dado por (x2,
y2) utilizando las características de trazo dadas por la instancia de QPen dada .
Ej2

13. Representación gráfica de datos
Alternativas
A la hora de construir una gráfica para presentar información en general
debe optarse por una metodología en función del tipo de información del
que se trate.
Entre las opciones que suelen darse se encuentran:
• Gráfica de valores almacenados en un arreglo
En general, se debe cuidar la forma en la que se representa la relación
entre la variable dependiente e independiente asociada al conjunto de
valores con el objetivo de no perder de vista la relación de magnitudes
entre las mismas.
• Gráficas de funciones matemáticas
En este caso, suele plantearse una equivalencia entre el plano de
representación de la imagen y el plano cartesiano.
Ej3 Ej4