Python中Tkinter模块的Canvas控件使用学习（3：绘制工艺卡片）

本文将之前用JavaScript在HTML5的Canvas中绘制的工艺卡片示例，在Python的Tkinter模块中用Canvas重新绘制，绘制如下形式的工艺卡片（图片来自参考文献5，原图来自参考文献4）。
在这里插入图片描述
虽然有代码可以参考，不用再从零开始计算工艺卡片每个点、直线、矩形的位置信息，但是由于JavaScript和Python的语法不尽相同，还是需要对代码进行部分调整，主要遇到的问题如下：

直线和矩形绘制函数不一样：JavaScript绘制直线用的是MoveTo和LineTo，绘制矩形用的是矩形左上角坐标和矩形宽高，而Tkinter的Canvas绘制直线用的是直线两端坐标，绘制矩形用的是矩形左上角和右下角的坐标。将源JavaScript代码修改为Python格式花费的时间比较长；
jpg图片无法加载：create_image不支持绘制jpg图片，需要采用其它包将jpg图片转为create_image能支持的格式，具体介绍请见上一篇文章；
jpg图片超出绘图区域：create_image不支持将图片绘制到指定区域，只能指定绘图点，最后只能先缩放图片，使其与绘图图形尺寸相同，然后再绘图，具体介绍请见上一篇文章；
文本显示位置不对：相同的字体尺寸，在Tkinter的Canvas中绘制要看着大一些，重新调整了字体尺寸，绘制文本时的锚点也进行了调整（主要是很多参数的用法不是很清楚）。

最终形成的完整代码及程序运行效果如下所示：

# coding=utf-8

import tkinter as tk
from PIL import Image, ImageTk

window=tk.Tk()
window.title('Canvas工程图示例')
window.geometry('1300x900')

cv=tk.Canvas(window,bg="LightGray",width =1200, height = 850,scrollregion=(0,0,1200,850))
cv.pack()
offsetX=20
offsetY=20
startX=offsetX+30
startY=offsetY+20
cardWidth=1063
cardHeight=754

#draw Card framework
cv.create_rectangle(offsetX,offsetY,offsetX+1123,offsetY+794,fill ='White',outline = '')
cv.create_rectangle(startX,startY,startX+cardWidth,startY+cardHeight,fill ='',outline = 'Black',width=3)

#draw card head 
cv.create_line(startX,startY+50,startX+1063,startY+50)
cv.create_line(startX+200,startY,startX+200,startY+50)
cv.create_line(startX+200+263,startY,startX+200+263,startY+50)
cv.create_line(startX+200+263,startY+25,startX+1063,startY+25)
cv.create_line(startX+200+263+75,startY,startX+200+263+75,startY+50)

cv.create_line(startX+200+263+75+150,startY,startX+200+263+75+150,startY+50)
cv.create_rectangle(startX+200+263+75,startY,startX+200+263+75+150,startY+25,fill ='LightGreen',outline = 'black')
cv.create_rectangle(startX+200+263+75,startY+25,startX+200+263+75+150,startY+25+25,fill ='LightGreen',outline = 'black')

cv.create_line(startX+200+263+75+150+75,startY,startX+200+263+75+150+75,startY+50)

cv.create_line(startX+200+263+75+150+75+150,startY,startX+200+263+75+150+75+150,startY+50)
cv.create_rectangle(startX+200+263+75+150+75,startY,startX+200+263+75+150+75+150,startY+25,fill ='LightGreen',outline = 'black')
cv.create_rectangle(startX+200+263+75+150+75,startY+25,startX+200+263+75+150+75+150,startY+25+25,fill ='LightGreen',outline = 'black')

cv.create_line(startX+200+263+75+150+75+150+150,startY,startX+200+263+75+150+75+150+150,startY+50)

cv.create_line(startX+200+263+75+150+75+150+75,startY+25,startX+200+263+75+150+75+150+75,startY+50)
cv.create_rectangle(startX+200+263+75+150+75+150+15,startY+25,startX+200+263+75+150+75+150+15+40,startY+25+25,fill ='LightGreen',outline = 'black')
cv.create_rectangle(startX+200+263+75+150+75+150+75+15,startY+25,startX+200+263+75+150+75+150+75+15+40,startY+25+25,fill ='LightGreen',outline = 'black')

#draw card middle    
#draw the first part
cv.create_line(startX,startY+50+224,startX+1063,startY+50+224)
cv.create_line(startX+400,startY+50,startX+400,startY+50+224)
cv.create_line(startX+400+400,startY+50,startX+400+400,startY+50+224)
cv.create_line(startX+400+400+100,startY+50,startX+400+400+100,startY+50+224)

for i in range(1,10):
    if(i==4):
        continue

    cv.create_line(startX+400+400,startY+50+22.4*i,startX+400+400+100,startY+50+22.4*i)

for i in range(1,10):
    cv.create_line(startX+400+400+100,startY+50+22.4*i,startX+400+400+100+163,startY+50+22.4*i)

for i in range(0,9):
    cv.create_rectangle(startX+400+400+100,startY+50+22.4*i,startX+400+400+100+162,startY+50+22.4*i+22.4,fill ='LightGreen',outline = 'black')

#draw the second part
cv.create_line(startX,startY+50+224+30,startX+1063,startY+50+224+30)
cv.create_rectangle(startX,startY+50+224+30,startX+1062,startY+50+224+30+375,fill ='LightGreen',outline = 'black')
 
cv.create_line(startX+30,startY+50+224,startX+30,startY+50+224+30+375)
cv.create_line(startX+30+250,startY+50+224,startX+30+250,startY+50+224+30+375)
cv.create_line(startX+30+250+80,startY+50+224,startX+30+250+80,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80,startY+50+224,startX+30+250+80+80,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100,startY+50+224,startX+30+250+80+80+100,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80,startY+50+224,startX+30+250+80+80+100+80,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80,startY+50+224+15,startX+30+250+80+80+100+80+174,startY+50+224+15)
cv.create_line(startX+30+250+80+80+100+80+58,startY+50+224+15,startX+30+250+80+80+100+80+58,startY+50+224+15+15+375)
cv.create_line(startX+30+250+80+80+100+80+58+58,startY+50+224+15,startX+30+250+80+80+100+80+58+58,startY+50+224+15+15+375)
cv.create_line(startX+30+250+80+80+100+80+174,startY+50+224,startX+30+250+80+80+100+80+174,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80+174+40,startY+50+224,startX+30+250+80+80+100+80+174+40,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80+174+40+40,startY+50+224,startX+30+250+80+80+100+80+174+40+40,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80+174+40+40+40,startY+50+224,startX+30+250+80+80+100+80+174+40+40+40,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80+174+40+40+40+40,startY+50+224,startX+30+250+80+80+100+80+174+40+40+40+40,startY+50+224+30+375)
cv.create_line(startX+30+250+80+80+100+80+174+40+40+40+40+40,startY+50+224,startX+30+250+80+80+100+80+174+40+40+40+40+40,startY+50+224+30+375)

for i in range(1,10):
    cv.create_line(startX,startY+50+224+30+41.6*i,startX+1063,startY+50+224+30+41.6*i)
              
#draw card tail     
cv.create_line(startX,startY+50+224+30+375,startX+1063,startY+50+224+30+375)
cv.create_rectangle(startX,startY+50+224+30+375,startX+600,startY+50+224+30+375+50,fill ='LightGreen',outline = 'black')

cv.create_line(startX,startY+50+224+30+375+25,startX+600,startY+50+224+30+375+25)
cv.create_line(startX,startY+50+224+30+375+25+25,startX+600,startY+50+224+30+375+25+25)     
cv.create_line(startX+25,startY+50+224+30+375,startX+25,startY+50+224+30+375+75)   
cv.create_line(startX+25+25,startY+50+224+30+375,startX+25+25,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100,startY+50+224+30+375,startX+25+25+100,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100,startY+50+224+30+375,startX+25+25+100,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75,startY+50+224+30+375,startX+25+25+100+75,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75,startY+50+224+30+375,startX+25+25+100+75+75,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75+25,startY+50+224+30+375,startX+25+25+100+75+75+25,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75+25+25,startY+50+224+30+375,startX+25+25+100+75+75+25+25,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75+25+25+100,startY+50+224+30+375,startX+25+25+100+75+75+25+25+100,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75+25+25+100+75,startY+50+224+30+375,startX+25+25+100+75+75+25+25+100+75,startY+50+224+30+375+75) 
cv.create_line(startX+25+25+100+75+75+25+25+100+75+75,startY+50+224+30+375,startX+25+25+100+75+75+25+25+100+75+75,startY+50+224+30+375+75)   
cv.create_line(startX+25+25+100+75+75+25+25+100+75+75,startY+50+224+30+375+37.5,startX+25+25+100+75+75+25+25+100+75+75+463,startY+50+224+30+375+37.5)

for i in range(1,5):
    cv.create_line(startX+25+25+100+75+75+25+25+100+75+75+92.6*i,startY+50+224+30+375,startX+25+25+100+75+75+25+25+100+75+75+92.6*i,startY+50+224+30+375+75)

for i in range(0,4):
    cv.create_rectangle(startX+25+25+100+75+75+25+25+100+75+75+92.6*i,startY+50+224+30+375+37.5,startX+25+25+100+75+75+25+25+100+75+75+92.6*i+92.6,startY+50+224+30+375+37.5+36,fill ='LightGreen',outline = 'black')

offsetYText=5
cv.create_text(startX+200+offsetYText,startY+offsetYText,text ='电镀工艺卡片',font =('宋体',30,'bold'),anchor = tk.NW)
cv.create_text(startX+200+263+offsetYText,startY+offsetYText,text ='产品型号',font =('宋体',12),anchor = tk.NW)
cv.create_text(startX+200+263+offsetYText,startY+25+offsetYText,text ='产品名称',font =('宋体',12),anchor = tk.NW)
cv.create_text(startX+200+263+75+150+offsetYText,startY+offsetYText,text ='零件图号',font =('宋体',12),anchor = tk.NW)
cv.create_text(startX+200+263+75+150+offsetYText,startY+25+offsetYText,text ='零件名称',font =('宋体',12),anchor = tk.NW)
cv.create_text(startX+200+263+75+150+75+150,startY+25+offsetYText,text ='共     页',font =('宋体',12),anchor = tk.NW)
cv.create_text(startX+200+263+75+150+75+150+75,startY+25+offsetYText,text ='第     页',font =('宋体',12),anchor = tk.NW)

img1 = Image.open("./images/part1.jpg").resize((399, 222), Image.ANTIALIAS)
photo1 = ImageTk.PhotoImage(img1)
cv.create_image(startX,startY+51,anchor = tk.NW,image=photo1)

img2 = Image.open("./images/part2.jpg").resize((399, 222), Image.ANTIALIAS)
photo2 = ImageTk.PhotoImage(img2)
cv.create_image(startX+401,startY+51,anchor = tk.NW,image=photo2)

cv.create_text(startX+400+400++100/2,startY+50+22.4*0+11,text ='零件材料',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*1+11,text ='零件重量',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*2+11,text ='零件面积',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*3.5+11,text ='零件表面状态',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*5+11,text ='来自何处',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*6+11,text ='交往何处',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*7+11,text ='镀层厚度',font =('宋体',12),anchor = 'center')
cv.create_text(startX+400+400+100/2,startY+50+22.4*8+11,text ='工艺守则',font =('宋体',12),anchor = 'center')  


window.mainloop()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

在这里插入图片描述

参考文献：
[1]http://c.biancheng.net/tkinter/canvas-widget.html
[2]https://docs.python.org/3.10/library/tkinter.html
[3]https://www.cnblogs.com/Mrzyz/p/16146182.html
[4]https://baike.baidu.com/item/%E5%B7%A5%E8%89%BA%E5%8D%A1/8940434?fr=aladdin
[5]https://blog.csdn.net/gc_2299/article/details/110292808
[6]https://blog.csdn.net/nilvya/article/details/104852414

相关阅读:
猿创征文｜ Unity简单实现跑马灯抽奖
 Nginx限制每秒请求次数，限制每秒连接次数，下载速度限制
 项目开发——【流程图】软件工程程序流程图详解《如何正确绘制项目开发流程图》
【2023集创赛】国家集创中心杯全国二等奖：运算放大器
 说一说ajax的请求过程？
二进制搭建 Kubernetes v1.20
个人能做股票期权吗？个人期权交易开户条件新规
 [SpringBoot笔记] SpringBoot-01-快速入门案例
 git stash 是一个在Git中用于保存当前工作目录和暂存区的临时状态的命令
 【VSCode】Windows环境下，VSCode 搭建 cmake 编译环境（通过配置文件配置）
原文地址：https://blog.csdn.net/gc_2299/article/details/126576158