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]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