Capítulo 12. Área de Dibujo

Tabla de contenidos

12.1. Contexto Gráfico
12.2. Métodos de Dibujo

El control DrawingArea (Área de Dibujo) proporciona un lienzo en el que poder dibujar de forma sencilla haciendo uso de los métodos de la clase gtk.gdk.Drawable ("dibujable"). Un control DrawingArea en realidad encapsula un elemento del tipo gtk.gdk.Window (ventana), que es una subclase de gtk.gdk.Drawable (al igual que gtk.gdk.Pixmap).

Para crear un Área de Dibujo se utiliza la función:

  drawing_area = gtk.DrawingArea()

Los elementos DrawingArea (Área de Dibujo) se crean inicialmente con un tamaño de (0,0), por lo que es necesario usar el siguiente método para poder hacer visible el Área de Dibujo (drawing_area) asignándole un ancho y una altura distintas de cero:

  drawing_area.set_size_request(width, height)

width y height especifican respectivamente el ancho y alto del área de dibujo (DrawingArea).

Para dibujar en este control es necesario acceder a su dibujable (gtk.gdk.Drawable) asociado, en este caso una ventana (gtk.gdk.Window), utilizando su atributo window:

  drawable = drawing_area.window

Nota

Para poder acceder a la ventana (gtk.gdk.Window) asociada al área de dibujo (DrawingArea) y poder dibujar en ella el Área de Dibujo debe haber sido instanciada (lo que da lugar a que genere una señal "realize").

12.1. Contexto Gráfico

Hay disponibles varios métodos que nos facilitan el dibujo en un área de dibujo (en su gtk.gdk.Drawable). Todos ellos precisan un contexto gráfico (gtk.gdk.GC) que alberga la información necesaria para llevar a cabo el dibujado. Para ello, un contexto gráfico (gtk.gdk.GC) dispone de los siguientes atributos::

background      # fondo
cap_style       # estilo de fin de linea
clip_mask       # máscara de recorte
clip_x_origin   # origen x del rectángulo de recorte
clip_y_origin   # origen y del rectángulo de recorte
fill            # relleno
font            # fuente
foreground      # color de frente (primer plano)
function        # función
graphics_exposures # exposiciones gráficas
join_style      # estilo de unión de líneas
line_style      # estilo de linea
line_width      # ancho de linea
stipple         # patrón de relleno
sub_window      # subventana
tile            # título
ts_x_origin     # origen x
ts_y_origin     # origen y

background (fondo) especifica el gtk.gdk.Color utilizado para dibujar el fondo.

foreground (frente) especifica el gtk.gdk.Color que se usa para dibujar el color de primer plano.

Para crear un gtk.gdk.Color que represente un color dado se emplea el método alloc_color() de la clase gtk.gdk.Colormap (Mapa de Color). Previamente a la creación de un color se debe disponer de un mapa de color asociado a un control (widget). Para ello se debe hacer uso del siguiente método:

  colormap = widget.get_colormap()

A la hora de especificar un gtk.gdk.Color tenemos varias opciones. Por un lado se puede indicar el color deseado utilizando una cadena de texto (tales como "red" (rojo), "orange" (naranja) o "navajo white" (blanco navajo) de entre las que se definen en el archivo rgb.txt de X Window; o, por otro lado, se puede indicar un triplete de números enteros, situados dentro del rango de valores 0 a 65535, que indican la cantidad de rojo (red), verde (green) y azul (blue) cuya mezcla produce el color deseado.

Además se pueden especificar otras propiedades que especifican si el color es modificable (propiedad writeable), de manera que es posible modificar su valor después pero no se puede compartir;o si se debe seleccionar el color más parecido entre los disponibles cuando no sea posible representar el color exacto (propiedad best_match).

El método alloc_color() se define así:

  color = colormap.alloc_color(red, green, blue, writeable=FALSE, best_match=TRUE)

  color = colormap.alloc_color(spec, writeable=FALSE, best_match=TRUE)

Ejemplos de uso de esta función:

  navajowhite = colormap.alloc('navajo white')

  cyan = colormap.alloc(0, 65535, 65535)

cap_style especifica el estilo con el que se dibujan los extremos de las líneas que no están conectadas a otras líneas. Los diferentes estilos disponibles son:

CAP_NOT_LASTigual que CAP_BUTT para lineas con ancho distinto de cero. En el caso de líneas de ancho cero no se dibuja el punto final de la linea.
CAP_BUTTlos extremos de las lineas se dibujan como cuadrados que se extienden hasta las coordenadas del punto final.
CAP_ROUNDlos extremos de las lineas se dibujan como semicírculos de diámetro igual al grosor de la linea y cuyo centro se sitúa en el punto final.
CAP_PROJECTINGlos extremos de las lineas son dibujados como cuadrados que se prolongan medio grosor más allá del punto final.

clip_mask especifica un mapa de píxeles (gtk.gdk.Pixmap) que se usará para hacer el recorte del dibujo contenido en el área de dibujo (drawing_area).

clip_x_origin y clip_y_origin especifican los valores de las coordenadas x e y correspondientes al origen del rectángulo de recorte tomando como referencia la esquina superior izquierda del área de dibujo (drawing_area).

fill especifica el estilo de relleno usado en el dibujo. Los estilos de relleno que se encuentran disponibles son:

SOLIDdibuja utilizando el color de primer plano (foreground).
TILEDdibuja usando un patrón en cuadrícula.
STIPPLEDdibuja usando un patrón de mapa de bits. Los píxeles correspondientes a los bits activados (a uno) del mapa de bits se dibujan usando el color de primer plano (foregraund) y aquellos correspondientes a los bits que no están activados se dejan intactos.
OPAQUE_STIPPLEDdibuja usando un patrón de mapa de bits. Los píxeles correspondientes a los bits del mapa de bits que están activados (a uno) se dibujan con el color de primer plano; aquellos correspondientes a los bits que no están activados se dibujan con el color de fondo.

font es la gtk.gdk.Font (Fuente) que se usa cómo fuente predeterminada para dibujar texto.

Nota

El uso del atributo font está obsoleto.

function especifica una función usada para combinar los valores de los bits de los píxeles de origen con los valores de los bits de los píxeles de destino y producir un pixel transformado. Los 16 posibles valores de este parámetro corresponden a las tablas de verdad posibles de tamaño 2x2. Sin embargo, solamente algunos de estos valores tienen utilidad en la práctica. Así, en el caso de imágenes a color es frecuentel el uso de COPY, XOR e INVERT y en el de mapas de bits también son habituales AND y OR. Los valores posibles de function son:

  COPY        # Copiar
  INVERT      # Invertir
  XOR         # O exclusivo
  CLEAR       # Limpiar
  AND         # Y
  AND_REVERSE # Y al revés
  AND_INVERT  # Y invertida
  NOOP        # Nada
  OR          # O
  EQUIV       # equivalencia
  OR_REVERSE  # O al revés
  COPY_INVERT # Copiar invertido
  OR_INVERT   # O invertido
  NAND        # No-Y
  SET         # Fijar

graphics_exposures especifica si las exposiciones gráficas están activadas (TRUE) o desactivadas (FALSE). Cuando graphics_exposures tiene el valor TRUE un fallo al copiar un píxel en una operación de dibujo genera un evento expose y en el caso de que la copia tenga éxito se generará un evento noexpose.

join_style especifica el estilo de unión que se usa en los encuentros de lineas en ángulo. Los estilos disponibles son:

JOIN_MITERlos lados de cada linea se extienden para unirse en ángulo.
JOIN_ROUNDlos lados de las dos lineas se unen con un arco de círculo.
JOIN_BEVELlos lados de las dos lineas se unen en chaflán, una linea recta que forma el mismo ángulo con cada una de las líneas.

line_style especifica el estilo con el que se dibuja una linea. Los estilos disponibles son:

LINE_SOLIDlas lineas se dibujan "sólidas" (línea continua).
LINE_ON_OFF_DASHse dibujan los segmentos impares; los segmentos pares no se dibujan (línea discontínua).
LINE_DOUBLE_DASHlos segmentos impares son normales. Los segmentos pares se dibujan con el color de fondo si el estilo de relleno es SOLID, o con el color de fondo aplicado a la máscara del patrón si el estilo de relleno es STIPPLED.

line_width especifica el ancho con el que se dibujan las líneas.

stipple especifica el gtk.gdk.Pixmap que se usará como patrón cuando el relleno esté puesto a STIPPLED o a OPAQUE_STIPPLED.

sub_window especifica el modo de dibujo de una ventana (gtk.gdk.Window) que tiene ventanas hijas (gtk.gdk.Windows). Los valores posibles de este parámetro son:

CLIP_BY_CHILDRENsólo se dibuja en la propia ventana pero no en sus ventanas hijas.
INCLUDE_INFERIORSdibuja en la ventana y en sus ventanas hijas.

tile especifica el gtk.gdk.Pixmap que se usará para dibujo cuadriculado cuando el relleno (fill) esté puesto a TILED.

ts_x_origin y ts_y_origin especifican las posiciones iniciales (el origen) de los mapas de bits de patrón y de dibujo cuadriculado.

Un Contexto Gráfico nuevo se crea mediante una llamada al método gtk.gdk.Drawable new_gc() :

gc = drawable.new_gc(foreground=None, background=None, font=None, 
                          function=-1, fill=-1, tile=None,
                          stipple=None, clip_mask=None, subwindow_mode=-1,
                          ts_x_origin=-1, ts_y_origin=-1, clip_x_origin=-1,
                          clip_y_origin=-1, graphics_exposures=-1,
                          line_width=-1, line_style=-1, cap_style=-1
                          join_style=-1)

Para poder crear un nuevo Contexto Gráfico usando este método es preciso que el control (correspondiente a drawable) sea:

  • una ventana (gtk.gdk.Window) ya realizada (realized), o bien:

  • un mapa de píxeles (gtk.gdk.Pixmap) asociado a una ventana (gtk.gdk.Window) ya realizada.

Los diversos atributos del Contexto Gráfico tienen los valores por defecto si no se fijan en el método new_gc(). Si se desea establecer el valor de los atributos de los contextos gráficos mediante el método new_gc() resulta muy práctico el uso de argumentos con nombre de Python.

También se pueden establecer los atributos individuales de un gtk.gdk.GC asisgnando valores a los atributos correspondientes. Estos son algunos ejemplos de ello:

  gc.cap_style = CAP_BUTT
  gc.line_width = 10
  gc.fill = SOLD
  gc.foreground = micolor

o usando los siguientes métodos:

  gc.set_foreground(color)
  gc.set_background(color)
  gc.set_function(function)
  gc.set_fill(fill)
  gc.set_tile(tile)
  gc.set_stipple(stipple)
  gc.set_ts_origin(x, y)
  gc.set_clip_origin(x, y)
  gc.set_clip_mask(mask)
  gc.set_clip_rectangle(rectangle)
  gc.set_subwindow(mode)
  gc.set_exposures(exposures)
  gc.set_line_attributes(line_width, line_style, cap_style, join_style)

El patrón de trazos que se usa cuando el parámetro de estilo de linea (line_style) es LINE_ON_OFF_DASH o LINE_DOUBLE_DASH se puede fijar haciendo uso del siguiente método:

  gc.set_dashes(offset, dash_list)

donde offset (desplazamiento) es el índice del valor del trazo inicial en dash_list y dash_list (lista de trazos) es una lista o tupla que contiene los números de píxeles que dibujar o saltar para formar los trazos. Éstos se dibujan empezando con el número de píxeles en la posición de desplazamiento(offset); después, el siguiente número de píxeles no se dibuja, y, luego, se dibuja el siguiente número de píxeles;; y así se continúa recorriendo todos los números de la lista de trazos y empezando otra vez cuando se llega a su final. Por ejemplo, si la lista de trazos es (2, 4, 8, 16) y el desplazamiento es 1, los trazos se dibujarán así: dibuja 4 píxeles, salta 8 píxeles, dibuja 16 píxeles, salta 2 píxeles, dibuja 4 píxeles, y así sucesivamente.

Es posible hacer una copia de un gtk.gdk.GC existente utilizando el método:

  gc.copy(src_gc)

Los atributos de gc serán los mismos que los de src_gc.