Getting Started with Graphics (Tkinter)
Create an empty Canvas
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
root.mainloop() # This call BLOCKS (so your program waits until you close the window!)
Draw a rectangle
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_rectangle(0,0,150,150, fill="yellow")
root.mainloop()
- Draw rectangles in different locations, sizes, fill colors, and outline colors
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_rectangle( 0, 0, 150, 150, fill="yellow")
canvas.create_rectangle(100, 50, 250, 100, fill="orange", width=5)
canvas.create_rectangle( 50, 100, 150, 200, fill="green", outline="red", width=3)
canvas.create_rectangle(125, 25, 175, 190, fill="purple", width=0)
root.mainloop()
-
Draw ovals, polygons, lines, centered text, and anchored text
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_oval(50, 50, 250, 150, fill="yellow")
canvas.create_polygon(50,30,150,50,250,30,150,10, fill="green")
canvas.create_line(50, 50, 250, 150, fill="red", width=5)
canvas.create_text(150, 100, text="Amazing!", fill="purple", font="Helvetica 26 bold underline")
canvas.create_text(150, 100, text="Carpe Diem!", anchor=SW, fill="orange", font="Times 18 italic")
root.mainloop()
-
Use tuples and lists-of-tuples as parameters
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_oval((50, 50),
(250, 150), fill="yellow")
canvas.create_polygon([(50,30),(150,50),(250,30),(150,10)], fill="green")
root.mainloop()
- Graphics Helper Functions
# Draw this picture:
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
def drawBelgianFlag(canvas, x0, y0, x1, y1):
# draw a Belgian flag in the area bounded by (x0,y0) in
# the top-left and (x1,y1) in the bottom-right
width = (x1 - x0)
canvas.create_rectangle(x0, y0, x0+width/3, y1, fill="black", width=0)
canvas.create_rectangle(x0+width/3, y0, x0+width*2/3, y1, fill="yellow", width=0)
canvas.create_rectangle(x0+width*2/3, y0, x1, y1, fill="red", width=0)
# Draw a large Belgian flag
drawBelgianFlag(canvas, 25, 25, 175, 150)
# And draw a smaller one below it
drawBelgianFlag(canvas, 75, 160, 125, 200)
# Now let's have some fun and draw a whole grid of Belgian flags!
width = 30
height = 25
margin = 5
for row in range(3):
for col in range(3):
left = 200 + col * width + margin
top = 50 + row * height + margin
right = left + width - margin
bottom = top + height - margin
drawBelgianFlag(canvas, left, top, right, bottom)
# Finally, don't forge to display the window!
root.mainloop()
- Custom Colors (with rgbString)
def rgbString(red, green, blue):
return "#%02x%02x%02x" % (red, green, blue)
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
pistachio = rgbString(147, 197, 114)
maroon = rgbString(176, 48, 96)
canvas.create_rectangle(50,50,150,150, fill=pistachio, outline=maroon,
width=4)
root.mainloop()
- Drawing in Circles with Trigonometry
- Trig 101
- Circle centered at origin:
- Circle centered at (cx, cy)
- Circle centered at (cx, cy) in Python graphics ("up is
down!")
- Clock Example
# Draw this picture:
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=350, height=200)
canvas.pack()
import math
def drawClock(canvas, x0, y0, x1, y1, hour, minute):
# draw a clock in the area bounded by (x0,y0) in
# the top-left and (x1,y1) in the bottom-right
# with the given time
# draw an outline rectangle
canvas.create_rectangle(x0, y0, x1, y1, outline="black",
width=1)
# find relevant values for positioning clock
width = (x1 - x0)
height = (y1 - y0)
r = min(width, height)/2
cx = (x0 + x1)/2
cy = (y0 + y1)/2
# draw the clock face
canvas.create_oval(cx-r, cy-r, cx+r, cy+r, outline="black",
width=2)
# adjust the hour to take the minutes into account
hour += minute/60.0
# find the hourAngle and draw the hour hand
# but we must adjust because 0 is vertical and
# it proceeds clockwise, not counter-clockwise!
hourAngle = math.pi/2 - 2*math.pi*hour/12
hourRadius = r*1/2
hourX = int(round(cx + hourRadius * math.cos(hourAngle)))
hourY = int(round(cy - hourRadius * math.sin(hourAngle)))
canvas.create_line(cx, cy, hourX, hourY, fill="black",
width=1)
# repeat with the minuteAngle for the minuteHand
minuteAngle = math.pi/2 - 2*math.pi*minute/60
minuteRadius = r*9/10
minuteX = cx + minuteRadius * math.cos(minuteAngle)
minuteY = cy - minuteRadius * math.sin(minuteAngle)
canvas.create_line(cx, cy, minuteX, minuteY, fill="black",
width=1)
# Draw a large clock showing 2:30
drawClock(canvas, 25, 25, 175, 150,
2, 30)
# And draw a smaller one below it showing 7:45
drawClock(canvas, 75, 160, 125, 200,
7, 45)
# Now let's have some fun and draw a whole grid of clocks!
width =
40
height = 40
margin = 5
hour = 0
for row in range(3):
for col in range(3):
left = 200 + col * width + margin
top = 50 + row * height + margin
right = left + width - margin
bottom = top + height - margin
hour += 1
drawClock(canvas, left, top, right, bottom,
hour, 0)
# Finally, don't forge to display the window!
root.mainloop()
Online References and Tutorials
There are a great many online references and tutorials for Tkinter.
Unfortunately, many (perhaps most) are not packaged in a way
that's especially useful for us (they may not use Python, they may
include too many or too few details, etc).
Here is an example of a website that we found to be useful:
NM Tech's Canvas reference (which is part of NM Tech's Tkinter Reference)
The web is a big place, so you may find other, even better tutorials!