Área de Dibujo

Tabla de contenidos

12.1. Contexto Gráfico

12.2. Métodos de Dibujo

El control Drawing Area (Á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 Drawing Area? 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.Drawing Area()

Los elementos Drawing Area (Á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)

instituto tecnologio de villahermosa

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

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 (Drawing Area) 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_LAST igual 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_BUTT los extremos de las lineas se dibujan como cuadrados que se extienden hasta las coordenadas del punto final.

CAP_ROUND los 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_PROJECTING los 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:

SOLID dibuja utilizando el color de primer plano (foreground).

TILED dibuja usando un patrón en cuadrícula.

STIPPLED dibuja 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_STIPPLED dibuja 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 2×2. 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_MITER los lados de cada linea se extienden para unirse en ángulo.

JOIN_ROUND los lados de las dos lineas se unen con un arco de círculo.

JOIN_BEVEL los 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_SOLID las lineas se dibujan “sólidas” (línea continua).

LINE_ON_OFF_DASH se dibujan los segmentos impares; los segmentos pares no se dibujan (línea discontínua).

LINE_DOUBLE_DASH los 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_CHILDREN sólo se dibuja en la propia ventana pero no en sus ventanas hijas.

INCLUDE_INFERIORS dibuja 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.

Leer y usar cuidadosamente todas estas instrucciones y videos para construir un valioso trabajo en formato DIGITAL, suerte.

Competencias Digitales (Tic’s Basicas) a practicar con este TEMA:

  • Usar www.Google.com para buscar y localizar UN material academico apropiado y que se pueda recomendar para el tema, ver VIDEO BUSQUEDAS abajo en esta pagina.
  • En el post ( o tema ) apropiado en el Libro de Blogger, pegar el material localizado y que se recomienda para este tema, ver VIDEO BLOGGER abajo en esta pagina.

pd: Recordar incluir la fuente del tema usando el formato de citacion apropiado, ver VIDEO WIKIPEDIA abajo en esta pagina.

  • En el editor de Blogger usar colores para destacar los parrafos mas importantes y usar subrayados para las citas mas relevantes.
  • En el post ( o tema ) apropiado en el libro en Blogger, para incluir ecuaciones o notacion matematica se debera usar el icono del editor de Blogger IMAGE y construir esta notacion matematica con imagenes Latex, ver VIDEO LATEX ABAJO.
  • Construir al final y despues de la fuente del material, un breve resumen ( no mas de 2–3 parrafos) explicando palabras propias el contenido del tema.

pd: Se pueden usar alguna de las citas que encontradas dentro del tema, solo recordar encerrarla entre comillas.

pd: Se pueden usar tambien cambios en fonts para darle mas visibilidad, consistencia y relevancia al resumen del tema.

  • PUNTOS EXTRAS Si se usa una segunda fuente valiosa de informacion y recordar encadenar los dos materiales mediante uno o dos parrafos apropiados.
  • Enviar a el maestro o compañeros un correo electronico que incluya la liga a el tema en blogger para revision, recomendacion, sugerencias y evaluacion, ver VIDEO LIGAS GMAIL abajo.
  • Sacar una cuenta (click en)http://docs.google.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se construyo en Gmail y Blogger ver VIDEO GOOGLE DOCS abajo en esta pagina.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

pd: Google Docs es el equivalente a OFFICE pero con la caracteristica que todos sus componentes ( procesador de palabras, presentacion electronica y hoja de calculo) estan completamente en internet, es decir todos los archivos o material estaran en linea, seguros y siempre disponibles, ademas de que se pueden trabajarlos desde cualquier pc, ya sea la personal, la del laboratorio de la escuela o la de un lugar publico como la biblioteca o un cafe internet.

  • Construir una Presentacion Electronica ( usando muy pocos slides) del tema en GOOGLE DOCS e incrustrarla en el tema de bloger ver VIDEO GOOGLE DOCS en esta pagina abajo.

pd: Recordar que una presentacion electronica, es solamente un resumen muy condensado del tema ( o mapa o guia mental ), que ayuda a recordar los elementos y conceptos mas basicos del tema, cuando se estan exponiendo frente a un grupo.

pd: No olvidar incluir un primer slide con el titulo de la presentacion electronica, un segundo slide con un indice de la presentacion electronica y un ultimo slide con dos o tres parrafos de conclusiones y bibliografia.

  • Buscar en Google Imagenes o www.Flickr.com o www.PhotoBucket.com una galeria de fotos o de imagenes apropiadas al tema actual,
  • Para los casos de Photobucket y Flicker, ambos sitios proporcionan ligas a sus imagenes y tambien objetos (los recuerdan??), que se pueden incluir en el tema del libro apropiado en Blogger.

pd: para estos sitios deberan obtener una cuenta usando el correo de gmail y de preferencia obtener el mismo usario que se ha venido manejando a lo largo del curso.

pd: Tratar de usar resoluciones y tamaños de imagenes chicos o medianos, recordar que todo este material termina en el post del tema en Blogger y esa pagina no tiene mucho espacio para desplegar fotos o imagenes.

pd: El formato apropiado para fotos o imagenes es JPG, tratar de no usar otros formatos.

pd: Se puede construir y conseguir esta coleccion o galeria de imagenes con:

1) Usando Google Imagenes, recordar conseguir solo imagenes que tengan permiso de publicacion abierto, no usar imagenes o fotos que tengan derechos reservados.

pd: Estas fotos almacenarlas en un folder en el desktop o escritorio de su computadora y subirlas a el post en blogger usando el icono IMAGE del editor de Blogger.

2) Flickr y Photo Bucket tambien tienen una gran cantidad de imagenes que se pueden usar o mejor dicho enlazar a el tema o post en Blogger.

3) Tambien se puede usar la camaras digitales o las camaras de sus telefonos celulares.

4) Tambien se puede usar el programa o aplicacion llamado Srip32.exe( solo buscar srip32 en google) bajarlo e instalarlo, este programa permite capturar una pantalla de la pc, es decir si se encuentra un sitio con imagenes o incluso texto apropiado o relevante al tema, capturar la pantalla con srip32 y ya se tendra la imagen, ver VIDEO Srip32 abajo.

  • Incluir al menos una imagen de cada uno de los dos sitios (flickr y Photobucket) en el tema o post que se esta construyendo en Blogger.
  • PUNTOS EXTRAS Si se incluyen una galeria completa de imagenes apropiadas desde cualquiera de estos sitios de FLICKR o Photobucket.
  • Sacar una cuenta (click en)www.DivShare.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se consiguio en Gmail y Blogger y Flickr ver VIDEO DIVSHARE abajo en esta pagina.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

pd: Usar Divshare para almacenar material en audio (MP3) apropiado a el tema ( no usarlo para almacenar material comercial o les suspenden la cuenta)

pd: El material en Audio, con formato MP3 se debera producir usando un microfono en la pc y programas de aplicacion apropiados, llamados editores de audio, un ejemplo de ellos es el SOUND RECORDER que ya viene en Windows, pero se recomienda usar mejor AUDACITY ( solo buscar en google AUDACITY) bajarlo e instalarlo, ver VIDEO AUDACITY abajo.

  • Crear al menos dos archivos de audio mp3:

1) El primero de ellos sera la lectura completa de este tema en voz apropiada. ( o aprender a editar con audacity la voz)

2) El segundo de ellos sera un resumen del tema. ( buena voz o editarla con audacity)

3) Ambos archivos subirlos a Div Share (recordor que tienen que ser MP3) y el reproductor que proporciona gratis Div Share, ver VIDEO DIVSHARE abajo e insertarlo en el lugar apropiado del tema que se esta construyendo en Blogger.

4) Ejemplo del reproductor incrustado en una pagina:

  • Sacar una cuenta (click en)www.YouTube.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se consiguio en Gmail y Blogger y Flickr.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

  • Para producir video se pueden usar tres fuentes:

1) Localizar Videos apropiados en Youtube.

2) Usar nuestras camaras digitales o nuestros telefonos celulares para producir video.

3) Producir un video de la propia pantalla de la computadora ( muy similar a lo que se hizo con Srip32) pero usando un programa especializado en video, tal como CAMSTUDIO (click en www.CamStudio.org) bajar e instalar ( no olvidar bajar e instalar el CODEC que esta abajo en el mismo sitio.

3.1) para Usar Camstudio solo recordar que es muy similar a Srip32 Solo que el resultado final es un archivo de video AVI.

  • Producir un video de resumen del tema (usar camstudio con el fondo de la pagina con el tema e irlo comentando en voz apropiada)
  • Producir un video en vivo con la exposicion del tema ( pueden usar la presentacion electronica de fondo o cualquier otro material, pizarron, filminas, rotafolios, etc.)
  • Subir los videos a su cuenta en Youtube e incluirlos o ligarlos en la pagina en Blogger, tambien los pueden subir directamente a BLOGGER ver VIDEO BLOGGER VIDEO abajo.

Saludos y suerte prof Lauro Soto, Ensenada, BC, Mexico.