import json
import tkinter as tk
from tkinter import filedialog
from tkinter import LabelFrame
from tkinter import StringVar
from PIL import Image, ImageTk

# 方块大小
card_size = 120
# 间隙大小
gap_size = 2
# 绘图起点坐标
start_x = 400
start_y = 100
# 7 * 5 方格
x_grid = 7
y_grid = 5

# 打开文件，载入json文件
def open_file():
    xxx_name = filedialog.askopenfilename(title='打开文件',
                                          filetypes=[('json', '*.json'),
                                                     ('All Files', '*')])
    # 更新Label text变量
    var.set(wzj_name)
    with open(xxx_name, 'r') as load_f:
        global card_dict
        card_dict = json.load(load_f)

# 绘图
def draw_card():
    # 这个打开文件，用的是回调函数，我暂时也不知道如何不用这个全局变量
    global card_dict
    imgs_list = []
    for i in range(y_grid):
        y1 = start_y + i * card_size
        for j in range(x_grid):
            x1 = start_x + j * card_size
            # 解析json里对应的文件名
            image_num = card_dict[str(i+1)][str(j+1)]
            image_path = "images/{}.png".format(image_num[0].upper())
            # 载入图片
            img = Image.open(image_path)
            # 重定义大小
            img = img.resize((card_size-gap_size, card_size-gap_size), Image.BILINEAR)
            # 重定义旋转
            img = img.rotate(image_num[1])
            imgs = ImageTk.PhotoImage(img)
            # 一定要放在列表里，要不然，后面的图会刷掉前面的图
            imgs_list.append(imgs)
            # 每一次都全绘已有图片
            for item in imgs_list:
                # 以nw左上角为基准点
                cv.create_image((x1+gap_size, y1+gap_size), anchor='nw', image=item)
            # 不调用update，不会更新画布
            win.update()
            # 停一秒再作下一步动作
            win.after(500)
    # 不让图消失太快
    win.after(100000)

win = tk.Tk()
win.title('tkinter')
w = win.winfo_screenwidth()
h = win.winfo_screenheight()
win.geometry("%dx%d" % (w, h))
cv = tk.Canvas(win, bg='silver', width=w, height=h)

# 要更新label的text，要用var.set方法才行
var = StringVar()
var.set("...")
lab_fra = LabelFrame(win, height=200, width=300, text='选择文件')
lab_fra.pack(side='top', fill='both', expand=True)
btn_open = tk.Button(lab_fra, text='打开文件', command=open_file)
btn_open.grid(row=0, column=0)
btn_render = tk.Button(lab_fra, text='开始渲染', command=draw_card)
btn_render.grid(row=0, column=1)
text_label = tk.Label(lab_fra, textvariable=var)
text_label.grid(row=0, column=2)

# 画格子， 要算好横纵坐标
for i in range(y_grid):
    y1 = start_y + i * card_size
    for j in range(x_grid):
        x1 = start_x + j * card_size
        cv.create_rectangle(x1, y1, x1 + card_size, y1 + card_size)

cv.pack()
win.mainloop()

{
  "1": {
    "1": ["39A", 90],"2": ["24A", 0],"3": ["2A", 0],"4": ["55a", 180],
    "5": ["2a",0],"6": ["14a",0],"7": ["39a",0]
  },
  "2": {
    "1": ["9A", 90],"2": ["73A", 0],"3": ["74A", 0],"4": ["8B", 90],
    "5": ["68a",0],"6": ["69a",0],"7": ["22a",90]
  },
  "3": {
    "1": ["51A", 90],"2": ["38A", 270],"3": ["36A", 90],"4": ["60B", 0],
    "5": ["31a",0],"6": ["18b",270],"7": ["6a",90]
  },
  "4": {
    "1": ["14A", 90],"2": ["81A", 0],"3": ["82A", 0],"4": ["10B", 90],
    "5": ["83a",0],"6": ["67a",0],"7": ["12a",90]
  },
  "5": {
    "1": ["39A", 180],"2": ["34A", 0],"3": ["24A", 0],"4": ["64a", 180],
    "5": ["34b",0],"6": ["8a",0],"7": ["39a",270]
  }
}

{
  "1": {
    "1": ["39A", 90],"2": ["18A", 270],"3": ["39a", 90],"4": ["38a", 270],
    "5": ["53b",0],"6": ["39b",0],"7": ["18b",0]
  },
  "2": {
    "1": ["64a", 90],"2": ["20b", 0],"3": ["55A", 90],"4": ["18a", 0],
    "5": ["31a",90],"6": ["39b",180],"7": ["39b",270]
  },
  "3": {
    "1": ["9A", 90],"2": ["18A", 0],"3": ["9A", 90],"4": ["9a", 90],
    "5": ["9b",90],"6": ["39b",90],"7": ["39b",0]
  },
  "4": {
    "1": ["4A", 90],"2": ["6A", 90],"3": ["9A", 90],"4": ["4A", 90],
    "5": ["39b",180],"6": ["39b",270],"7": ["13b",90]
  },
  "5": {
    "1": ["39a", 180],"2": ["53A", 180],"3": ["51A", 180],"4": ["53a", 180],
    "5": ["8a",0],"6": ["38b",270],"7": ["39b",270]
  }
}