Tcl/Tk
Curso On-Line de Programação

O widget canvas

O widget canvas provê uma área de desenho vetorial para os programas em Tcl/Tk. Os canvas possuem um número enorme de comandos e opções e serão estudados, em detalhes, nesta aula. A utilização do widget canvas para impressão será estudada na aula 21.

Canvas são criados através do comando canvas: 

toplevel .t
canvas .t.c
pack .t.c -expand 1 -fill both
.t.c create rectangle 5 5 50 50 -fill blue
.t.c create arc 100 100 200 200 -style pieslice -start 45 -extent 225 -fill red
Criará uma janela com um canvas em seu interior e desenhará um retângulo azul e um semi-círculo vermelho dentro do canvas.

Veja como um canvas pode ser poderoso:


Planta baixa
de uma construção em um canvas
 
 


Um editor de setas
construído com um canvas
 
 


Gráficos de pizza
em um canvas
utilizando a biblioteca
tkpiechart 5.3

A seguir serão apresentadas as principais opções do widget canvas:
 

Opção Descrição
-closeenough Determina o quão próximo deve estar o cursor do mouse para que seja considerado como estando no interior de um ítem.
-confine Determina se será possível visualizar além da área de scroll. Se 1, permite a visualização. Caso contrário, não permite.
-scrollregion Determina a área de scroll. No formato: {X1 Y1 X2 Y2}.
-xscrollincrement Determina o incremento para rolagem horizontal da janela do canvas.
-yscrollincrement Determina o incremento para rolagem vertical da janela do canvas.

O canvas suporta as seguintes unidades de medida: pixels, polegadas(i), centímetros(c), milímetros(m) e pontos(p). Veja os exemplos: 

Valor em pixels:      10
Valor em polegadas:   10i
Valor em centímetros: 10c
Valor em milímetros:  10m
Valor em pontos:      10p


As coordenadas crescem de cima para baixo de da esquerda para a direita.

Os seguintes índices são suportados: número, end, insert, sel.first, sel.last, @x,y.

A seguir serão apresentadas os comandos do widget canvas:
 

Comando Descrição
addtag Adiciona uma tag à lista de tags, associada a cada ítem que satisfaca a especificação dada.
bbox Retorna uma lista com quatro elementos, correspondentes às coordenadas do retângulo envolvendo os ítens cujas tags sejam dadas.
bind Associa eventos aos ítens cujas tags sejam dadas.
canvasx Retorna a coordenada X dentro do canvas, que corresponde à coordenada X da tela.
canvasy Retorna a coordenada Y dentro do canvas, que corresponde à coordenada Y da tela.
coords Retorna ou define as coordenadas de um ítem.
create Cria um novo ítem, do tipo especificado.
dchars Apaga os caracteres dentro da faixa especificada, nos ítens cuja tag for especificada.
delete Apaga os ítens cujas tags sejam especificadas.
dtag Remove a tag especificada.
find Retorna os ítens que satisfaçam as especificações dadas. Veja as especificações logo a seguir.
focus Ajusta o foco para o ítem dado.
gettags Retorna a lista de todos os ítens associados à tag dada.
icursor Ajusta a posição do cursor, para inserção, dentro dos ítens cuja tag seja dada.
index Retorna uma string numérica dando a posição do caractere, dentro do ítem, cuja tag seja dada.
insert Insere texto dentro do ítem cuja tag seja dada.
itemcget Retorna o valor da opção indicada, no ítem cuja tag seja dada.
itemconfigure Configura o valor da opção indicada, no ítem cuja tag seja dada.
lower Coloca o ítem cuja tag seja dada, abaixo do ítem indicado.
move Move os ítens cuja tag seja dada, para a posição indicada no canvas. A nova posição será um deslocamento da posição atual.
postscript Gera um arquivo Encapsulated Postscript, representando a parte do canvas especificada. Suporta muitas opções que serão tratadas mais adiante.
raise Coloca o ítem cuja tag seja dada, acima do ítem indicado.
scale Reescala os ítens indicados pela tag dada.
scan Veja os comandos de scroll na aula 29.
select adjust Ajusta o final da seleção no ítem indicado, para uma nova posição.
select clear Remove a seleção do ítem indicado.
select from Ajusta a âncora da seleção no ítem indicado.
select item Retorna a identificação do ítem selecionado.
select to Ajusta a seleção no ítem especificado.
type Retorna o tipo do primeiro ítem apontado pela tag dada.
xview Rola a janela do canvas horizontalmente.
yview Rola a janela do canvas verticalmente.

Veja as especificações de procura para o comando find:
 

Especificação Descrição
above Seleciona o ítem que esteja depois do ítem cuja tag seja dada.
all Seleciona todos os ítens dentro do canvas.
bellow Seleciona o ítem que esteja antes do ítem cuja tag seja dada.
closest Seleciona o ítem que esteja mais próximo das coordenadas dadas depois do ítem dado.
enclosed Seleciona todos os ítens que estejam dentro da área X1 Y1 X2 Y2 dada.
overlapping Seleciona todos os ítens que ultrapassam ou estejam dentro da área X1 Y1 X2 Y2 dada.
withtag Seleciona todos os ítens cuja tag seja dada..

Veja os tipos de ítens suportado pelo widget canvas, e suas opções:

arc 

nome_do_canvas create arc x1 y1 x2 y2 [opção valor ...]
 
Opção Descrição
-fill Cor do preechimento.
-outline Cor da linha.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-width Largura da linha.
-extent Ângulo final.
-outlinestipple Bitmap usado para desenhar a linha.
-start Ângulo inicial.
-style Estilo: pieslice( fatia de pizza ), chord( corda ), ou arc( arco ).

bitmap 

nome_do_canvas create bitmap x y [opção valor ...]
 
Opção Descrição
-anchor Posição da âncora.
-background Cor de fundo.
-bitmap O bitmap.
-foreground Cor de primeiro plano.
-tags Nome da tag para identificar o objeto.

image 

nome_do_canvas create image x y [opção valor ...]
 
Opção Descrição
-anchor Posição da âncora.
-image A imagem.
-tags Nome da tag para identificar o objeto.

line 

nome_do_canvas create line x1 y1 x2 y2 ... xN yN [opção valor ...]
 
Opção Descrição
-fill Cor do preechimento.
-smooth Se 1 a linha será desenhada como uma curva. Caso contrário, não será uma curva.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-width Largura da linha.
-arrow Especifica se a linha será terminada por uma seta: none, first, last, both.
-arrowshape Uma lista com três elementos que descrevem a seta.
-capstyle Como desenhar os pontos finais da linha: butt, projecting, round.
-joinstyle Como devem ser as junções dos vértices: bevel, miter, round.
-splinesteps Ângulo da curva.

oval 

nome_do_canvas create oval x1 y1 x2 y2 [opção valor ...]
 
Opção Descrição
-fill Cor do preechimento.
-outline Cor da linha.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-width Largura da linha.

polygon 

nome_do_canvas create polygon x1 y1 x2 y2 ... xN yN [opção valor ...]
 
Opção Descrição
-fill Cor do preechimento.
-smooth Se 1 a linha será desenhada como uma curva. Caso contrário, não será uma curva.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-width Largura da linha.
-splinesteps Ângulo da curva.

rectangle 

nome_do_canvas create rectangle x1 y1 x2 y2 [opção valor ...]
 
Opção Descrição
-fill Cor do preechimento.
-outline Cor da linha.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-width Largura da linha.

text 

nome_do_canvas create text x y [opção valor ...]
 
Opção Descrição
-anchor Âncora.
-fill Cor do preechimento.
-font Nome e propriedades da fonte.
-justify Alinhamento do texto: left, right ou center.
-stipple Um bitmap.
-tags Nome da tag para identificar o objeto.
-text String a ser exibida.
-width Largura da linha de texto. Se 0, a quebra ocorrerá somente se for encontrado um caractere de quebra de linha "\n".

window 

nome_do_canvas create window x y [opção valor ...]
 
Opção Descrição
-anchor Âncora.
-height Altura da janela.
-width Largura da janela.
-window Nome da janela que deve ser associada ao ítem.
-tags Nome da tag para identificar o objeto.

A seguir estão as opções suportadas pelo comando postscript:
 

Opção Descrição
-colormap Especifica uma variável que deve conter um vetor cujos elementos contém o código Postscript para uma cor em particular.
-colormode Pode ser: color, grey ou mono.
-file Nome do arquivo a ser gerado. Caso não seja fornecido nenhum nome, o Postscript será retornado como resultado da execução do comando.
-fontmap Especifica o mapa da fonte que deve ser usado. É uma variável contendo um vetor cujos elementos são listas de dois elementos: {font size}.
-height Altura da área do canvas que deve ser impressa. O default é a altura do canvas.
-pageanchor Âncora da posição da impressão sobre o papel. O default é center.
-pageheight Altura da impressão no papel.
-pagewidth Largura da impressão no papel.
-pagex Ponto de posicionamento X.
-pagey Ponto de posicionamento Y.
-rotate Se 1, rotaciona a pagina de 90 graus: "landscape". Caso contrário, não rotaciona.
-width Largura da área do canvas que deve ser impressa. O default é a largura do canvas.
-x Coordenada X do canto superior esquerdo da área do canvas a ser impressa.
-y Coordenada Y do canto superior esquerdo da área do canvas a ser impressa.

As opções PostScript serão estudadas na aula 20, que trata de técnicas de impressão.

O Exemplo a seguir mostra como "soltar" os objetos dentro de um canvas, para que eles possam ser posicionados com o mouse: 

global mover1 mover2
set mover1 0
set mover2 0
toplevel .t
canvas .t.c
pack .t.c -expand 1 -fill both
.t.c create rectangle 5 5 50 50 -fill blue -tags item1
.t.c create arc 100 100 200 200 -style pieslice -start 45 -extent 225 -fill red -tags item2
Criará uma janela com um canvas em seu interior e desenhará um retângulo azul e um semi-círculo vermelho dentro do canvas. 
.t.c bind item1 <ButtonPress> {set mover1 1}
.t.c bind item1 <ButtonRelease> {set mover1 0}
.t.c bind item1 <Motion> {
    if {$mover1 == 1} {
        .t.c move item1 [expr %x - [lindex [.t.c coords item1] 0]] [expr %y - [lindex [.t.c coords item1] 1]]
    }
}
Configura o item item1, o retângulo, para que se movimente para a posição do mouse sobre a janela caso o botão do mouse esteja pressionado sobre o ele. 
.t.c bind item2 <ButtonPress> {set mover2 1}
.t.c bind item2 <ButtonRelease> {set mover2 0}
.t.c bind item2 <Motion> {
    if {$mover2 == 1} {
        .t.c move item2 [expr %x - [lindex [.t.c coords item2] 0]] [expr %y - [lindex [.t.c coords item2] 1]]
    }
}
Configura o item item2, o semi-círculo, para que se movimente para a posição do mouse sobre a janela caso o botão do mouse esteja pressionado sobre o ele.

Para uma descrição detalhada de todos os comandos disponíveis em Tk, consulte a documentação on-line, ou o Tcl/Tk Reference Guide, ou ainda o Tcl/Tk Electronic Reference.

Para maiores informações envie e-mail para info@souzamonteiro.com.

http://www.souzamonteiro.com
info@souzamonteiro.com

Copyright(C) 2000 by Roberto Luiz Souza Monteiro