tkinter库 -- 绘制图形canvas

GUI界面设计 – tkinter库应用 – 绘制图形canvas

---

---

前言

学习tkinter库的一些心得体会，以及常用案例

---

一、Canvas画布组件

Canvas (画布)是一个长方形的区域，用于图形绘制或复杂的图形界面布局。可以在画布上绘制图形、文字，放置各种组件和框架。

cv1 = Canvas(root, bg='white', width=100, height=100, relief=RIDGE, borderwidth=5)

二、绘制图形

1.绘制矩形

Canvas对象. create_rectangle(矩形左上角的x坐标，y坐标，右下角的x坐标，y坐标, 选项, …)
其中常用选项包括：

• width：边界宽度，常用2
• fill： 填充颜色
• outline：边界线颜色

from tkinter import *
root = Tk()
# 创建一个Canvas，设置其背景色为白色
cv = Canvas(root, bg = 'white', width = 200, height = 100)
cv.create_rectangle(10,10,110,110, width =2,fill = 'red') 	#指定矩形的填充色为红色, 宽度为2
cv.create_rectangle(120, 20,180, 80, outline = 'green')	#指定矩形的边框颜色为绿色
cv.pack()
root.mainloop()

2.绘制线条

canvas.create_line(x0, y0, x1, y1, ..., xn, yn, 选项)

参数x0, y0, x1, y1, …, xn, yn是线段的端点。

from tkinter import *
root = Tk()
cv = Canvas(root, bg = 'white', width = 200, height = 100)
cv.create_line(10, 10, 100, 10, arrow='none')	#绘制没有箭头线段
cv.create_line(10, 20, 100, 20, arrow='first')	#绘制起点有箭头线段
cv.create_line(10, 30, 100, 30, arrow='last')	#绘制终点有箭头线段
cv.create_line(10, 40, 100, 40, arrow='both')	#绘制两端有箭头线段
cv. create_line(10,50,100,100,width=3, dash=7)	#绘制虚线
cv.pack()
root.mainloop() 

绘制圆弧

Canvas对象. create_arc(position，[width，fill，outline，start，extend, …])

• Position = (弧形外框矩形左上角x坐标，y坐标， 右下角x坐标，y坐标)
• start：从x轴正方向（起始方向）开始，单位为度进行绘制，
  start为起始绘制角度的设置
• extent：以start参数作为参考，以start参数给定的角度开始，
  逆时针延伸角度，这个角度为extent设置的值

绘制椭圆

使用create_oval(外切矩形坐标，选项)方法可以创建一个椭圆对象。
需要指定两个点的坐标，分别作为左上角点和右下角点的坐标来确定一个矩形，
而该方法则负责绘制该矩形的内切椭圆。

绘制多边形

使用create_polygon()方法可以创建一个多边形对象，可以是一个三角形、矩形或者任意一个多边形，具体语法如下：

Canvas对象. create_polygon (顶点1的x坐标, 顶点1的y坐标, 顶点2的x坐标, 顶点2的y坐标, …, 顶点n的x坐标, 顶点n的y坐标, 选项, ...)

from tkinter import *
root = Tk()
cv = Canvas(root, bg = 'white', width = 300, height = 100)
cv.create_polygon (35,10,10,60,60,60, outline = 'blue', fill = 'red', width=2)             #等腰三角形
cv.create_polygon (70,10,120,10,120,60, outline = 'blue', fill = 'white', width=2)	#直角三角形
cv.create_polygon (130,10,180,10,180,60, 130,60, width=4)		#黑色填充正方形
cv.create_polygon (190,10,240,10,190,60, 240,60, width=1)		#对顶三角形
cv.pack()
root.mainloop()

绘制文字

使用create_text()方法可以创建一个文字对象，具体语法如下：

文字对象 = Canvas对象.create_text((文本左上角的x坐标,文本左上角的y坐标), 选项, ...)

常用方法：

• 设置文本的选中起始位置
  cv6.select_from(txt,0)
• 设置文本的选中结束位置
  cv6.select_to(txt,3)

绘制位图和图像

使用create_bitmap()方法可以绘制Python内置的位图：

Canvas对象. create_bitmap((x坐标,y坐标),bitmap =位图字符串, 选项, ...)

其中：

• (x坐标,y坐标)是位图放置的中心坐标；
• 常用选项有bitmap、activebitmap和disabledbitmap，分别用于指定正常、活动、禁用状态显示的位图。

采用create_image()方法可以绘制图形图像：

Canvas对象. create_image((x坐标,y坐标), image = 图像文件对象, 选项, ...)

tkinter字体属性

通过元组表示字体

通过3个元素的元组，可以表示字体：

（font family，size，modifiers)

作为一个元组tuple的第一个元素font family是字体名，
size为字体大小单位为point；
modifiers为包含粗体、斜体、下划线的样式修饰符。

通过Font对象表示字体

使用tkFont.Font来创建字体。格式如下：

ft = tkFont.Font(family = '字体名',size ,weight ,slant, underline, overstrike)

其中：
size为字体大小；
weight=‘bold’或’normal’，'bold’为粗体；
slant=‘italic’或’normal’，'italic’为斜体；
underline=1或0，1为下划线；
overstrike=1或0，1为删除线。
Eg：ft = Font(family=“Helvetica”,size=36,weight=“bold”)

Canvas综合示例

# 绘制图像
from tkinter import *
import math

root = Tk()
root.geometry('460x500')

# 第一块画布，绘制矩形
cv1 = Canvas(root, bg='white', width=100, height=100, relief=RIDGE, borderwidth=5)
# create_rectangle(矩形左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标。。。。）
# stipple：使用位图平铺进行填充。该选项可与 fill 选项结合使用，fill 选项用于指定位图的颜色。
cv1.create_rectangle(10, 10, 80, 80, width=2, fill='yellow', outline='green')
cv1.create_rectangle(50, 50, 90, 95, width=2, fill='lightblue', outline='blue', stipple='info')
cv1.grid(row=0, column=0)


# 第2块画布，绘制直线
cv2 = Canvas(root, bg='azure', width=100, height=100, relief=GROOVE, borderwidth=5)
# create_line(参数x0, y0, x1, y1, ..., xn, yn是线段的端点）
#  arrow表示line指向，first起点箭头，last终点箭头，both两端都有
#  activefill：当鼠标在line上时出现的特定风格，本例中鼠标移动到第二个line上时line变蓝
# dash虚线
cv2.create_line(10, 30, 80, 30, width=2, arrow='first', fill='orange', dash=3, activefill='blue')
cv2.create_line(30, 50, 50, 90, width=2, arrow='first', dash = 3)
cv2.grid(row=0, column=1)


# 第3块画布，绘制椭圆
cv3 = Canvas(root, bg='aqua', width=100, height=100, relief=GROOVE, borderwidth=5)
# create_oval(顶点1的x坐标, 顶点1的y坐标, 顶点2的x坐标, 顶点2的y坐标, …, 顶点n的x坐标, 顶点n的y坐标, 选项..）
# 需要指定两个点的坐标，分别作为左上角点和右下角点的坐标来确定一个矩形，而该方法则负责绘制该矩形的内切椭圆
cv3.create_oval(20, 40, 90, 90, width=2, fill='orange', outline='green')
cv3.create_rectangle(20,40,90,90)
cv3.grid(row=0, column=2)


# 第4块画布，绘制圆弧
cv4 = Canvas(root, bg='beige', width=100, height=200, relief=GROOVE, borderwidth=5)
# create_arc(弧外框矩形左上角的x坐标, 弧外框矩形左上角的y坐标, 弧外框矩形右下角的x坐标, 弧外框矩形右下角的y坐标, 选项, ...)。。。。）
cv4.create_arc(10, 10, 80, 80, width=2, fill='grey', outline='blue')
cv4.create_rectangle(20, 60, 60, 120, width=2,  outline='green')
cv4.create_arc(20, 60, 60, 120, width=2, fill='lightblue', outline='green')
# start：从x轴正方向（起始方向）开始，单位为度进行绘制，start为起始绘制角度的设置
# extent：以start参数作为参考，以start参数给定的角度开始，逆时针延伸角度，这个角度为extent设置的值
cv4.create_arc(20, 130, 90, 190, width=2, start=20, extent=140, fill='lightgreen', outline='blue')
cv4.grid(row=0, column=3, rowspan=2)



# 第5块画布，绘制多边形
cv5 = Canvas(root, bg='lightgrey', width=200, height=100, relief=SOLID, borderwidth=5)
# create_polygon(顶点1的x坐标, 顶点1的y坐标, 顶点2的x坐标, 顶点2的y坐标, …, 顶点n的x坐标, 顶点n的y坐标, 选项..）
cv5.create_polygon(35, 10, 10, 60, 60, 60,  width=2, fill='yellow', outline='green')

# 提前设定画布边缘的中间点，总宽度为200，总高度为100
center_x = 100
center_y = 50
r = 30

# 将五角星的五个顶点存入列表中，注意五个定点绘制的顺序
points = [
    # A顶点
    center_x - int(r * math.sin(2 * math.pi / 5)),
    center_y - int(r * math.cos(2 * math.pi / 5)),
    # C顶点
    center_x + int(r * math.sin(2 * math.pi / 5)),
    center_y - int(r * math.cos(2 * math.pi / 5)),
    # E顶点
    center_x - int(r * math.sin(math.pi / 5)),
    center_y + int(r * math.cos(math.pi / 5)),
    # B顶点
    center_x,
    center_y - r,
    # D顶点
    center_x + int(r * math.sin(math.pi / 5)),
    center_y + int(r * math.cos(math.pi / 5)),
]
cv5.create_polygon(points, outline='red', fill='yellow', activefill='blue', width=2)  # 绘制多边形(坐标依次罗列，不用加括号，还有参数，fill,outline)；
cv5.create_polygon (150,30,180,30,150,60, 180,60, width=1)

cv5.grid(row=1, column=0, columnspan=2)



# 第6块画布，绘制文字
cv6 = Canvas(root, bg='lightpink', width=100, height=100, relief=GROOVE, borderwidth=5)
# create_text(文本左上角的x坐标,文本左上角的y坐标。。。。）
txt = cv6.create_text((10,30), text = '吉林交通\n职业\n技术学院', fill = 'blue', anchor='nw')
#设置文本的选中起始位置
cv6.select_from(txt,0)
#设置文本的选中结束位置
cv6.select_to(txt,3)					#选中“吉林交通”
cv6.create_text(80, 80, width=2, text='你好',  fill='magenta', anchor = SE, justify = CENTER)
cv6.grid(row=1, column=2)


# 第7块画布，绘制位图
cv7 = Canvas(root, bg='peachpuff', width=100, height=100, relief=GROOVE, borderwidth=5)
# create_bitmap((x坐标,y坐标),bitmap =位图字符串, 选项, ...)
cv7.create_bitmap(30, 30, bitmap='error')
cv7.create_bitmap(60, 30, bitmap='question')
cv7.create_bitmap(50, 70, bitmap='hourglass')
cv7.grid(row=2, column=0)


# 第8块画布，绘制图像
cv8 = Canvas(root, bg='lightcyan', width=300, height=100, relief=GROOVE, borderwidth=5)
# create_image((x坐标,y坐标), image = 图像文件对象, 选项, ...)
bm = PhotoImage(file = r"D:\WorkSpace\PycharmProjects\Demo_JLJT_Python_Teach\k_Demo_GUI_9\sunflower.png")
bm2 = PhotoImage(file = r"D:\WorkSpace\PycharmProjects\Demo_JLJT_Python_Teach\k_Demo_GUI_9\peashooter.png")
bm3 = PhotoImage(file = r"D:\WorkSpace\PycharmProjects\Demo_JLJT_Python_Teach\k_Demo_GUI_9\peabullet.png")
bm4 = PhotoImage(file = r"D:\WorkSpace\PycharmProjects\Demo_JLJT_Python_Teach\k_Demo_GUI_9\zombie.png")
cv8.create_image(40, 50, image=bm)
cv8.create_image(120, 50, image=bm2)
cv8.create_image(180, 50, image=bm3)
cv8.create_image(280, 50, image=bm4)

cv8.grid(row=2, column=1, columnspan=3)


# 第10块画布，绘制子窗口
cv9 = Canvas(root, bg='plum', width=100, height=100, relief=GROOVE, borderwidth=5)
# create_window(矩形左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标。。。。）
def callback(event):
    print(event.x, event.y)
    cv9.coords(rt5, (event.x, event.y))        # 调整图像位置

# 调整图像位置
bm5 = PhotoImage(file = r"D:\WorkSpace\PycharmProjects\Demo_JLJT_Python_Teach\k_Demo_GUI_9\box.gif")
rt5 = cv9.create_image(20,20, image=bm5)
cv9.bind('', callback)
cv9.grid(row=3, column=0)

root.mainloop()

---

总结

绘制图形