Aula sobre canvas - Python Computação II - Engenharia Mecânica UFRJ

Prévia do material em texto

Canvas no Tkinter
 
Canvas
● É um widget que sere para fazer plotagens, desenhos, 
e até animações.
● Funciona como uma prancheta aonde se pode desenhar 
à vontade.
● É definido como qualquer outro widget e possui as 
mesmas configurações que botões e labels.
● Não precisa necessariamente de frame para usar o 
canvas.
 
Exemplo
 
Exemplo
from Tkinter import *
class Janela:
 def __init__(self,toplevel):
 self.canvas1 = Canvas(toplevel, width=100, height=200,
 cursor='X_cursor', bd=5,bg='dodgerblue')
 self.canvas1.pack(side=LEFT)
 self.canvas2 = Canvas(toplevel, width=100, height=200,
 cursor='dot', bd=5,bg='purple')
 self.canvas2.pack(side=LEFT)
raiz=Tk()
Janela(raiz)
raiz.mainloop()
 
Canvas
● Neste exemplo temos duas opções novas:
– cursor: formato do ponteiro do mouse quando 
ele estiver sobre o widget.
● Exemplos: X_cursor, circle, dot, dotbox, 
fleur, target
– bd: espessura da borda de um widget, em pixels.
 
Coordenadas
● O sistema de coordenadas do Canvas não é igual ao 
cartesiano.
 
Coordenadas
● Ao definir um par contendo as coordenadas x e y de um 
desenho, lembre-se que o par (x, yc) em coordenadas 
cartesianas corresponde a (x, altura – yc) em coordenadas 
do Canvas, sendo altura a altura do canvas.
Altura = 100
Coordenadas cartesianas de P:
 (10,90)
Coordenadas do Canvas de P:
 (10,10)
 
Desenhando Linhas
● Sintaxe:
self.nome_do_canvas.create_line(x1,y1,...,xn,yn)
● A linha começa no ponto (x1,y1), passa por (x2,y2), 
(x3,y3), e assim por diante, até chegar a (xn,yn).
 
Desenhando Linhas
● Formas de passar os pontos:
create_line(x1,y1,x2,y2,...,xn,yn)
create_line((x1,y1),(x2,y2),...,(xn,yn))
create_line((x1,y1,x2,y2), (x3,y3,x4,y4),...)
● As tuplas poderiam ser listas também.
● Facilita o trabalho quando os pontos já são tuplas ou 
listas:
P1 = (x1,y1), P2 = (x2,y2), create_line(P1,P2)
 
Algumas opções de configuração
● width: espessura da linha
● fill : cor da linha
 
Exemplo
from Tkinter import *
class Linhas:
 def __init__(self,toplevel):
 self.canvas = Canvas(toplevel, width=100, height=300, bd=5)
 self.canvas.pack()
 self.frame=Frame(raiz)
 self.frame.pack(pady=10)
 self.b1=Button(self.frame, font = ('Verdana','12','bold'),
 text='Desenhar', bg = 'pink', command=self.desenhar)
 self.b1.pack()
 
 def desenhar(self): # Desenha um segmento para a direita
 self.canvas.create_line(10,10,10,100, fill='purple',width=3)
 self.canvas.create_line(10,100,30,150, fill='pink',width=3)
 self.canvas.create_line(30,150,90,230, fill='blue',width=3)
 self.canvas.create_line(90,230,40,10, fill='green',width=3)
 self.canvas.create_line(40,10,10,10, fill='red',width=3)
raiz=Tk()
Linhas(raiz)
raiz.mainloop()
 
Exercício
 
Exercício
● Tamanho do Canvas: 400 x 400
● Ponto inicial: (200,200)
● Cada clique desenha uma linha de tamanho 10 na 
direção desejada, com a espessura que quiser e cor que 
quiser.
● Dica: use uma variável self.ultimo para guardar o ponto 
 desenhado por último, pois esse será o ponto inicial do 
desenho da próxima linha, na direção escolhida. 
Inicialmente temos:
self.ultimo = (200,200)
 
Polígonos
● Desenhamos polígonos no Canvas como desenhamos 
linhas.
● A diferença é que o método aplicado é o 
create_polygon, e que a linha deve terminar no ponto 
em que começou.
● Algumas configurações:
– fill: preenche o polígono com uma cor
– outline: cor da linha
– width: espessura da linha
 
Exemplo
from Tkinter import *
class Poligono:
 def __init__(self,toplevel):
 self.canvas=Canvas(toplevel, width=200, 
 height=200, bg='blue')
 self.canvas.pack()
 pol=self.canvas.create_polygon(
100,10,10,145
,10,190,190,190,
 190,145,100,10,
 fill='pink')
raiz = Tk()
Poligono(raiz)
raiz.mainloop()
(100,10)
(190,145)
(190,190)(10,190)
(10,145)
 
Retângulos
● Para desenhar um retângulo basta informar as 
coordenadas de dois vértices opostos.
● Use o método create_rectangle;
● Mesmas opções de configuração do polígono:
– fill: preenche o retângulo com uma cor
– outline: cor da linha
– width: espessura da linha
 
Exemplo
from Tkinter import *
class Retangulo:
 def __init__(self,toplevel):
 self.canvas=Canvas(toplevel, width=200, 
 height=200, bg='white')
 self.canvas.pack()
 ret=self.canvas.create_rectangle(
30,100,150,150, fill='red')
raiz = Tk()
Retangulo(raiz)
raiz.mainloop()
 
Texto
● Para adicionar texto ao canvas use a sintaxe:
self.nome_do_canvas.create_text(x,y)
● O texto definido pela opção text será posicionado em 
(x,y).
● A opção font define a fonte do texto, e a opção fill a cor 
do texto.
 
Exemplo
from Tkinter import *
class Texto:
 def __init__(self,toplevel):
 self.canvas=Canvas(toplevel, width=100, 
height=100, bg='white')
 self.canvas.pack()
 t=self.canvas.create_text(50,50 ,fill='red',
 text="Canvas",
 font = ('Verdana','13','bold'))
raiz = Tk()
Texto(raiz)
raiz.mainloop()
 
Texto
● Imagine que o texto a ser mostrado esteja contido num 
retângulo:
● Através da opção anchor podemos especificar em qual 
destes pontos do retângulo a coordenada (x,y) está.
● Se a opção anchor = SW e definimos a posição do texto 
em (10,90), a borda esquerda inferior do texto ficará 
em (10,90).
● O valor padrão é anchor = CENTER
 
Exemplo
from Tkinter import *
class Texto:
 def __init__(self,toplevel):
 self.canvas=Canvas(toplevel, width=100, 
height=100, bg='white')
 self.canvas.pack()
 t=self.canvas.create_text(10,90 ,fill='red',
 text="Canvas",
 font = ('Verdana','13','bold'),
 anchor=SW)
raiz = Tk()
Texto(raiz)
raiz.mainloop()
 
Exercício
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22