Servicio Comun de Informatica Grafica

C A P I T U L O 18 El Widget Canvas

El widget denominado canvas proporciona un display para uso general, que puede ser programado para dibujar sobre él una gran variedad de objetos (Tk los denomina items), tales como líneas, arcos, círculos, imágenes, polígonos, rectángulos, texto, e incluso ventanas. Estos items no deben ser confundidos con widgets. El único widget aquí presente es el canvas, que permitirá representar diferentes tipos de objetos. Estos items aparecerán sobre el canvas nada más ser creados, sin necesidad de utilizar el pack. Tampoco tendrán un nombre como el que poseen los widgets; todo lo más, podrán llevar una etiqueta para identificarlos.

NOTA IMPORTANTE: En la versión 8.0, las opciones de borde, generalmente denominadas outline, funcionan, a diferencia de las versiones alfa. Sin embargo, estas opciones lo hacen de forma no muy atractiva. Esto es extraño teniendo en cuenta que funcionaban de forma absolutamente correcta hasta la version 7.6/4.2 pach 2. Esto se explica por sí mismo en el ejemplo 18-1.

Coordenadas del canvas

La posición y el tamaño de los items representados en el canvas está determinado por un conjunto de coordenadas. Diferentes items se caracterizan con un número diferentes de coordenadas. Por ejemplo, el objeto text necesita dos coordenadas, que especifican el punto donde se colocará dicho texto. Por su parte, una línea necesita cuatro o más coordenadas, ya que como mínimo será necesario especificar el punto de inicio y el punto final de cada segmento que compone la línea.

Las coordenadas se darán en el momento de crear el objeto, pero podrán ser actualizadas posteriormente con la operación coords. Las unidades en que se miden estas coordenadas dependerán del sufijo que se coloque tras ellas. Estos sufijos podrán ser c (centímetros), i (pulgadas), m (milímetros), p (puntos de impresora, 1/72 de pulgada).

Las coordenadas del canvas tiene su origen (punto 0,0) en la esquina superior izquierda; teniendo la coordenada X, el eje horizontal, sentido positivo hacia la derecha; y la coordenada Y, el eje vertical, el sentido positivo hacia abajo.

Los atributos width y height del canvas determinan su área visible. El atributo scrollregion determina aquella área que perteneciendo al canvas no es visible en pantalla, y que para poder verla es necesario desplazarse mediante las barras de scroll.

Ejemplo 18-1

canvas .c -width 400 -height 100

pack .c

.c create oval 10 10 80 80 -fill red -width 4 -tag ovalo

.c create rectangle 100 10 180 80 -fill blue -tag rectangulo

.c create line 200 10 200 80 300 80 300 10 350 10 -arrow last -tag linea

.c create text 350 50 -text "Tcl/Tk 8.0" -tag texto

Puede verse el horrible borde que presentan estas figuras.

Las próximas secciones describirán cada uno de los items del canvas.

Arcs

Un arco es una sección de un óvalo. Las dimensiones del óvalo están determinadas por las cuatro coordenadas que forman una caja en la que estaría inscrito el óvalo. El arco también está determinado por dos ángulos: el ángulo start y el ángulo extent. La región del óvalo puede estar rellena o vacía, y hay tres estilos diferentes para definir el relleno de esta región. El estilo pieslice, conecta el arco con el punto central del óvalo; el estilo arc, dibuja solo la cuerda del arco; y el estilo chord, que une los dos puntos finales del arco.

Ejemplo 18-2

canvas .c -widh 110 -height 110

pack .c

.c create arc 10 10 100 100 -start 45 -extent -90 -style pieslice \

-fill orange -outline black

.c create arc 10 10 100 100 -start 135 -extent 90 -style chord \

-fill blue -outline white -width 4

.c create arc 10 10 100 100 -start 255 -extent 45 -style arc \

-fill black -width 2

En la siguiente tabla se pueden ver los atributos del item arc:

Tabla 18-1. Atributos del item arc.

extent grados	Longitud del arco en sentido antihorario.
fill color	Color de la región interior del arco.
outline color	Color del arco propiamente dicho.
start grados	El ángulo de inicio del arco.
stipple bitmap	Patrón para el relleno.
style estilo	Estilo del relleno: pieslice, chord, arc.
tags tag	Lista de las etiquetas asignadas al item.
width ancho	Ancho del arco en coordenadas del canvas.

Bitmaps

Un bitmap en Tk, es un gráfico simple (nada que ver con los ficheros con extensión BMP de Windows), en formato XBM, con dos colores, uno para el dibujo y otro para el fondo. El bitmap es posicionado mediante dos coordenadas; y es especificado mediante un nombre simbólico o por el nombre del fichero que contiene el bitmap.

En la siguiente tabla se pueden ver los atributos del item bitmap:

Tabla 18-2. Atributos del item bitmap.

anchor posicion	c n en e se s sw w nw.
background color	Color del fondod el bitmap.
bitmap nombre	Nombre del bitmap.
bitmap nombre_fichero	Nombre del fichero que contiene al bitmap.
foreground color	Color del dibujo del bitmap.
tags tag	Lista de las etiquetas asignadas al item.

Todo lo relacionado con bitmaps se trata en profundidad en el capítulo 19.

Images

Una imagen debe de ser creada antes de su utilización mediante el comando image. Una vez definida la imagen, esta puede ser colocada en el canvas. Los formatos gráficos admitidos para las imágenes por Tk son el formato GIF y el PPM.

En la siguiente tabla se pueden ver los atributos del item image:

Tabla 18-3. Atributos del item image.

anchor posicion	c n en e se s sw w nw.
image name	Nombre de la imagen.
tags tag	Lista de las etiquetas asignadas al item.

Todo lo relacionado con images se trata en profundidad en el capítulo 19.

Line

Una línea debe tener dos o más conjuntos de coordenadas, donde cada conjunto de coordenadas definen un punto de la línea. Los segmentos que forman la línea pueden ser unidos mediante diferentes estilos, y la línea puede ser dibujada como un spline o como una polilínea. Por otro lado, también es posible terminar una línea con una flecha mediante el atributo arrow.

Ejemplo 18-5.

canvas .c -width 180 -height 180

pack .c

.c create line 20 160 20 20 160 20 160 140 40 140 \

40 40 140 40 140 120 60 120 60 60 120 60 120 100 -arrow last

En la siguiente tabla se pueden ver los atributos del item line:

Tabla 18-4. Atributos del item line.

arrow posicion	c n en e se s sw w nw.
arrowshape {a b c}	Tres parámetros que definen el tipo de punta de flecha a poner: c es el ancho, y b es el largo total de la flecha; a es la longitud de la parte de la flecha que toca a la línea.
capstyle estilo	Estilo del principio y final de la línea: butt, projecting o round.
fill color	Color de la línea.
joinstyle estilo	Estilo con el que se unen los segmentos: bevel, miter o round.
smooth booleano	Si es true, se dibuja como un spline.
splinesteps numero	Número de segmentos para el spline que aproxima a la línea.
stipple bitmap	Patrón para el dibujo de la línea.
tags tag	Lista de las etiquetas asignadas al item.
width width	Ancho de la línea, en unidades de pantalla.

Oval

Un óvalo es definido por dos conjuntos de coordenadas, que definen la caja en la que se inscribe dicho óvalo. Si esta caja es cuadrada, se dibujaría un círculo.

Ejemplo 18-6

canvas .c -width 270 -height 180

pack .c

.c create oval 10 10 80 80 -fill red -width 4

.c create oval 100 10 150 80 -fill blue -width 0

.c create oval 170 10 250 40 -fill black

En la siguiente tabla se pueden ver los atributos del item oval:

Tabla 18-5. Atributos del item oval.

fill color	Color de la región interior del óvalo.
outline color	Color del interior del óvalo.
stipple bitmap	Patrón para el relleno.
tags tag	Lista de las etiquetas asignadas al item.
width ancho	Ancho del óvalo.

Polygon

Un polígono es una forma cerrada con un número determinado de puntos, uno por cada vértice del polígono. Los vértices pueden ser conectados por línea suavizadas o por segmentos. No existe la opción outline para los polígonos, pero se puede dibujar el borde dibujando una línea con las mismas coordenadas que este, teniendo en cuenta que es necesario poner como último punto de la línea, un punto con las mismas coordenadas que el primero, para que la línea resulte cerrada.

Ejemplo 18-7.

canvas .c -width 180 -height 180

pack .c

.c create poly 20 -40 40 -20 40 20 20 40 -20 40 \

-40 20 -40 -20 -20 -40 -fill red

.c create line 20 -40 40 -20 40 20 20 40 -20 40 \

-40 20 -40 -20 -20 -40 -fill white -width 5

.c create text 0 0 -text STOP -fill white

.c move all 90 90

En la siguiente tabla se pueden ver los atributos del item polygon:

Tabla 18-6. Atributos del item polygon.

fill color	Color de la región interior del polígono.
smooth booleano	Si es true, se dibujará un spline alrededor de los puntos.
stipple bitmap	Patrón para el relleno.
tags tag	Lista de las etiquetas asignadas al item.

Rectangle

Un rectángulo estará especificado por dos conjuntos de coordenadas situadas en esquinas opuestas. Un rectángulo puede tener un color de relleno y un color del borde.

Ejemplo 18-8.

canvas .c -width 300 -height 180

pack .c

.c create rectangle 20 20 180 100 -fill red -width 5

.c create rectangle 80 50 200 140 -fill green -width 2

.c create rectangle 120 120 280 160 -fill orange -width 2

En la siguiente tabla se pueden ver los atributos del item rectangle:

Tabla 18-7. Atributos del item rectangle.

fill color	Color de la región interior del rectángulo.
outline color	Color del borde del rectángulo.
stipple bitmap	Patrón para el relleno.
tags tag	Lista de las etiquetas asignadas al rectángulo.
width ancho	Ancho del borde.

Text

El item text permite representar texto en el canvas. La posición del texto es dada por un conjunto de coordenadas. Las operaciones de edición y selección se llevan a cabo mediante índices de la misma forma que en el caso del widget entry.

Ejemplo 18-9.

canvas .c -width 300 -height 180

pack .c

.c create text 100 50 -text "Tcl/Tk 8.0" -font {Bold 12} -fill red

.c create text 200 100 -text "Tcl/Tk 8.0" -font {Bold 12} -fill blue -width 1

.c create text 100 100 -text "Tcl/Tk 8.0" -font {Lucida 16} -fill red -width 0

.c create text 100 150 -text "Tcl/Tk 8.0" -font {Courier 22} -fill red -width 0

En la siguiente tabla se muestran los índices para el item text.

Tabla 18-8. Indices del item text.

0	Indice del primer carácter.
end	Indice del último carácter.
number	Indice de un carácter, contando desde cero
insert	El carácter a la derecha del cursor de insercción.
x,y	El carácter bajo las coordenadas x e y especificadas.

En la tabla que se muestra a continuación pueden verse las operaciones más comunes con el item text. En esta tabla $c es un canvas, y $t es el tag de un item text.

Tabla 18-9. Indices del item text.

$c dchars $t primero ?ultimo?	Borra los caracteres desde primero hasta ultimo.
$c focus ?$t?	Le asigna el foco al item especificado, o devuelve el ID del item con el foco.
$c index $t index	Devuelve el valor numérico de index.
$c index $t index string	Inserta string, en la posición anterior a index.

En la siguiente tabla se pueden ver los atributos del item text:

Tabla 18-10. Atributos del item text.

anchor posicion	c n en e se s sw w nw
fill color	Color de la región interior del arco.
font fuente	Fuente del texto.
stipple bitmap	Patrón para el relleno del texto.
tags tag	Lista de las etiquetas asignadas al item.
text cadena	Cadena de texto a representar.
width ancho	Ancho del borde.Si se le da un ancho diferente de 0, el texto se colocará orientado verticalmente.

Window

El item window permite posicionar otros widgets en el canvas. La posición es especificada mediante un conjunto de coordenadas. También es posible especificar el ancho y el alto, o permitir que el item window determine su propio tamaño.

Operaciones del canvas

La tabla 20-11 resume las principales operaciones (las más comunes) que pueden realizarse con un widget canvas. En esta tabla, $t representa el tag que identifica a uno o más items del canvas.

Tabla 18-11. Operaciones con el widget canvas.

$c addtag tag all	Añade la etiqueta tag a todos los items del canvas.
$c addtag tag closest x y ?halo? ?inicio?	Añade la etiqueta tag al item más próximo a las coordenadas x,y.
$c addtag tag enclosed x1 y1 x2 y2	Añade la etiqueta tag a los items que estén completamente encerrados en una región de coordenadas x1 y1 x2 y2.
$c addtag tag withtag $t	Añade la etiqueta tag a los items identificados por la etiqueta $t.
$c bbox $t ?tag tag �?	Devuelve las coordenadas de la caja que encerraría a los item identificados por su tag, en forma de una lista de cuatro elementos.
$c bind $t ?secuencia? ?comando?	Asigna un bind a un item del canvas.
$c cget opcion	Devuelve el valor de opcion para el canvas..
$c configure �	Configura o actualiza una opción para el canvas.
$c coords $t ?x1 y1 �?	Obtiene o modifica las coordenadas de un item.
$c create tipo x y ?x2 y2? ?opc valor?�	Crea un item, del tipo especificado, en las coordenadas dadas.
$c delete $t ?tag �?	Borra el item(s) especificados por tag(s) o IDs.
$c dtag $t ?tag_borr?	Elimina un determinado tag de los items identificados por sus tags.
$c gettags $t	Devuelve los tgas asociados al primer item identificado por $t.
$c itemconfigure $t �	Obtiene o modifica la configuración de un item $t.
$c move $t dx dy	Mueve el item $t la cantidad indicada en los ejes x e y. Estos valores son referidos a la posición anterior, no al origen.
$c postscript �	Genera postscript del dibujo actualmente en el canvas.
$c scale $t x0 y0 xs ys	Escala las coordenadas de los items identificados por $t. La distancia entre cada item y el punto dado por x0 cambiará en un factor igual a xs. De igual forma para Y.
$c type $t	Devuelve el tipo del primer item identificado por $t..
$c xview moveto index	Mueve la posición del canvas una cantidad index (en incrementos de scroll).
$c yview moveto index	Mueve la posición del canvas una cantidad index (en incrementos de scroll)..

Salida Postscript

El widget canvas es capaz de generar una salida postscript de su contenido. Esta salida puede ser visualizada mediante algún programa como el Ghosview que permite ver este formato o enviado a una impresora postscript mediente un programa auxiliar (Tcl no permite, de momento, imprimir directamente).

La siguiente tabla resume las opciones para la salida postscript del canvas.

Tabla 18-12. Opciones de la salida postscript del canvas.

colormap nombre_var	El índice de nombre_var es un nombre de color, y el contenido de cada elemento es el código postscript para generar los valores RGB para ese color.
colormode modo	color, grey o mono.
file nombre_fichero	Fichero en el que se va a escribir el postscript. Si no se define ninguno, el postscript es devuelto como el resultado de la operación.
fontmap nombre_var	El índice de nombre_var es un nombre de una fuente de texto, y el contenido de cada elemento es una lista de dos elementos, el nombre de la fuente postscript y el tamaño del punto.
height tamanio	Alto del área a imprimir.
pageanchor anchor	c n en e se s sw s nw
pageheight tamanio	Alto de la imagen en la salida.
pagewidth tamanio	Ancho de la imagen en la salida.
pagex posicion	Coordenada x del punto de inicio.
pagey posicion	Coordenada y del punto de inicio.
rotate booleano	Si es true, rotará el dibujo sobre el eje X.
width tamanio	Tamaño del área a imprimir.
x posicion	Coordenada x del canvas desde el lado izquierdo de la imagen.
y posicion	Coordenada y del canvas desde la parte superior de la imagen.

Esto que a simple vista parace tan complicado, puede conseguirse con el procedimiento del ejemplo 18-10. En este ejemplo se considera que las opciones de impresión se pasan en una variable global de nominada OpImp. Por otro lado, este procedimiento llama al programa ps2pdf.exe para convertir el formato postscript en formato pdf, y posteriormente lo visualiza llamando al programa AcroRd32.exe, que podrá enviarlo a la impresora que se desee. De esta forma se salva el inconveniente de que Tcl/Tk no pueda imprimir.

Ejemplo 18-10.

proc Salida_fich_post { fich c } {

global OpImp

if [ catch { $c postscript \

-colormode $OpImp(modocolor) \

-pageheight $OpImp(alto) \

-pagewidth $OpImp(ancho) \

-pagex $OpImp(posx) \

-pagey $OpImp(posy) \

-rotate $OpImp(rotar) \

-pageanchor nw \

-file $fich } error ] {

error " No se ha Podido Convertir a Postscript\n$error"

}

update idletasks

# Se le quita la extension y se le aniade la extension pdf.

set fich2 [join "[lindex [split $fich .] 0] pdf" .]

# Llamada a programa ps2pdf para convertir el postcript a pdf.

catch { exec d:/gs/ps2pdf $fich $fich2 } var

# Llamada a programa Acrobat Reader para leer el postcript.

catch { exec c:/Acrobat3/Reader/AcroRd32.exe $fich2 & } var

}