python Tkinterを用いた画像とボタンの表示方法について

前提・実現したいこと

pythonのTkinterで画像当てクイズのようなGUIを作っています。
しかし、チェックボタンが思うように配置されず、困っています。

発生している問題・エラーメッセージ

現在のGUIは以下のようになっています。
わかりにくくて申し訳ありませんが、黒い画像が4つ並んでいます。
その下に、4つのチェックボタンを配置したいのですが、なぜか１のみ表示されます。

該当のソースコード

python
1import tkinter
2import tkinter.ttk
3from PIL import Image, ImageTk
4import random
5
6class Application(tkinter.Frame):
7    def __init__(self, master=None):
8        super().__init__(master)
9        self.master = master
10        self.master.title('test')
11        self.pack()
12        self.create_widgets()
13        self.count=0
14        self.correct_No=0
15        self.answer_No=0
16        self.correct_count=0
17        self.rate=0
18        
19    def create_widgets(self):
20        # ボタン        
21        self.next_button = tkinter.ttk.Button(self, text='next')
22        self.next_button.grid(row=4,column=0)
23        self.next_button.bind('<Button-1>', change_graphics)
24        
25        self.button1 = tkinter.ttk.Checkbutton(self, text='1')
26        self.button1.grid(row=3, column=0)
27        self.button1.bind('<Button-1>')
28        self.button2 = tkinter.ttk.Checkbutton(self, text='2')
29        self.button2.grid(row=3, column=1)
30        self.button2.bind('<Button-1>')
31        self.button3 = tkinter.ttk.Checkbutton(self, text='3')
32        self.button3.grid(row=3, column=2)
33        self.button3.bind('<Button-1>')
34        self.button4 = tkinter.ttk.Checkbutton(self, text='4')
35        self.button4.grid(row=3, column=3)
36        self.button4.bind('<Button-1>')
37        
38        
39        # canvas
40        self.test_canvas = tkinter.Canvas(self, width=1080, height=540)
41        self.test_canvas.grid(row=0, column=0, rowspan=3)
42        
43        self.test_canvas2 = tkinter.Canvas(self, width=1080, height=540)
44        self.test_canvas2.grid(row=0, column=1, rowspan=3)
45        
46        self.test_canvas3 = tkinter.Canvas(self, width=1080, height=540)
47        self.test_canvas3.grid(row=0, column=2, rowspan=3)
48        
49        self.test_canvas4 = tkinter.Canvas(self, width=1080, height=540)
50        self.test_canvas4.grid(row=0, column=3, rowspan=3)
51        
52        # canvasに初期画像を表示
53        self.test_canvas.photo = ImageTk.PhotoImage(original_image)
54        self.image_on_canvas = self.test_canvas.create_image(1080/16, 120, anchor='nw', image=self.test_canvas.photo)
55        
56        self.test_canvas2.photo = ImageTk.PhotoImage(original_image2)
57        self.image_on_canvas2 = self.test_canvas.create_image(250+1080/16, 120, anchor='nw', image=self.test_canvas2.photo)
58        
59        self.test_canvas3.photo = ImageTk.PhotoImage(original_image3)
60        self.image_on_canvas3 = self.test_canvas.create_image(2*250+1080/16, 120, anchor='nw', image=self.test_canvas3.photo)
61        
62        self.test_canvas4.photo = ImageTk.PhotoImage(original_image4)
63        self.image_on_canvas4 = self.test_canvas.create_image(3*250+1080/16, 120, anchor='nw', image=self.test_canvas4.photo) 
64        
65def set_image(img):
66    # canvasの書き換え
67    app.test_canvas.photo = ImageTk.PhotoImage(img)
68    app.test_canvas.create_image(500,120,anchor='nw', image=app.test_canvas.photo)
69    
70    app.test_canvas2.photo = ImageTk.PhotoImage(img)
71    app.test_canvas3.photo = ImageTk.PhotoImage(img)
72    app.test_canvas4.photo = ImageTk.PhotoImage(img)
73    
74    
75def set_image4(img1,img2,img3,img4):
76    app.test_canvas.photo = ImageTk.PhotoImage(img1)
77    app.test_canvas.itemconfig(app.image_on_canvas, image=app.test_canvas.photo)
78    app.test_canvas2.photo = ImageTk.PhotoImage(img2)
79    app.test_canvas.itemconfig(app.image_on_canvas2, image=app.test_canvas2.photo)
80    app.test_canvas3.photo = ImageTk.PhotoImage(img3)
81    app.test_canvas.itemconfig(app.image_on_canvas3, image=app.test_canvas3.photo)
82    app.test_canvas4.photo = ImageTk.PhotoImage(img4)
83    app.test_canvas.itemconfig(app.image_on_canvas4, image=app.test_canvas4.photo)
84    
85    
86def change_graphics(event):
87    app.count+=1
88    R=random.randint(1,260)
89    R2=random.randint(1,260)
90    R3=random.randint(1,260)
91    R4=random.randint(1,260)
92    original_image= Image.open(open('sample'+str(R)+'.png', 'rb'))
93    original_image2= Image.open(open('sample'+str(R2)+'.png', 'rb'))
94    original_image3= Image.open(open('sample'+str(R3)+'.png', 'rb'))
95    original_image4= Image.open(open('sample'+str(R4)+'.png', 'rb'))
96    if(app.count%2==0):
97        set_image4(original_image,original_image2,original_image3,original_image4)
98    else:
99        set_image(original_image)
100
101    
102# 画像ファイル読み込み
103R=random.randint(1,260)
104R2=random.randint(1,260)
105R3=random.randint(1,260)
106R4=random.randint(1,260)
107original_image = Image.open('black.jpg')
108original_image2 = Image.open('black.jpg')
109original_image3 = Image.open('black.jpg')
110original_image4 = Image.open('black.jpg')
111
112# アプリケーション起動
113root = tkinter.Tk()
114app = Application(master=root)
115app.mainloop()
116

補足情報

まだ未実装の部分もあり、混乱を招く変数などもあるかもしれませんが、
チェックボタンが1つしか表示されない問題点についてアドバイスいただきたいです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

column=0 の横幅が Canvas の width=1080 になっているので、
２つ目以降のチェックボックスは、スクリーンサイズによっては見切れてるようです。

確認方法:
4枚のキャンバスを生成してますが、bg= で背景色を付けて見て下さい。
原因がはっきりすると思います。

python
1        self.test_canvas = tkinter.Canvas(self, width=1080, height=540, bg="red")
2        self.test_canvas.grid(row=0, column=0, rowspan=3)
3
4        self.test_canvas2 = tkinter.Canvas(self, width=1080, height=540, bg="blue")
5        self.test_canvas2.grid(row=0, column=1, rowspan=3)
6
7        self.test_canvas3 = tkinter.Canvas(self, width=1080, height=540, bg="green")
8        self.test_canvas3.grid(row=0, column=2, rowspan=3)