質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

Q&A

解決済

1回答

1919閲覧

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

kamome01

総合スコア16

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

0グッド

0クリップ

投稿2020/08/13 10:57

編集2020/08/13 11:50

前提・実現したいこと

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

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

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

イメージ説明

該当のソースコード

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つしか表示されない問題点についてアドバイスいただきたいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

確認方法:
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)

4枚の画像は全て、1つ目のキャンバスに描画されてます。

解決方法:

  • キャンバスのサイズを画像に合わせて小さくする
  • 1つのキャンバスに1枚の画像を表示

or

  • キャンバスを1枚にして columnspan=4 を設定

 チェックボックスを画像の下に配置したい場合は、配置位置は要調整。

  • gridレイアウトではなく、canvas.create_window でキャンバス上にチェックボックスの配置。

投稿2020/08/13 16:23

編集2020/08/14 01:15
teamikl

総合スコア8664

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kamome01

2020/08/14 04:01

解決しました!初歩的な質問で申し訳ないです。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問