キャンバスに画像が表示されない

Question

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

Tkinterでアプリケーションを作りたいのですが、キャンバスに画像が表示されず困っています。

該当のソースコード

import numpy as np
import cv2
import PIL.Image,PIL.ImageTk
import tkinter as tk
from pickle import TRUE

##### PATH設定
MAHJONG_TILES_PATH = 'C:\university\guraduation research\pai_images\'  # 麻雀牌画像パス
PATH_DELIMITER = '\'

### 定数定義
Mahjong_tiles_types = ['ji1','ji2','ji3','ji4','ji5','ji6','ji7','man1','man2','man3','man4','man5','man6','man7','man8','man9',
                       'pin1','pin2','pin3','pin4','pin5','pin6','pin7','pin8','pin9','sou1','sou2','sou3','sou4','sou5','sou6','sou7','sou8','sou9']
tile_images = {}
for tile in Mahjong_tiles_types:
        tile_images[tile] = cv2.imread(MAHJONG_TILES_PATH + tile + '.png', cv2.IMREAD_COLOR)
all_tiles = cv2.hconcat([tile_images['ji1'],tile_images['ji1'],tile_images['ji2'],tile_images['ji3'],tile_images['man1'],tile_images['man2'],tile_images['man3'],
                             tile_images['pin4'],tile_images['pin5'],tile_images['pin6'],tile_images['sou7'],tile_images['sou8'],tile_images['sou9']])




def title_btn1_click():
    global intro_frame0
    main_frame.destroy()
    intro_frame0 = tk.Frame(root)
    root.title('ルールを知らない人向け(入門編)')
    intro_frame0.pack()
    intro_frame0.label = tk.Label(intro_frame0,font=('MSゴシック','20','bold'), text='このステップは麻雀のルールを全く知らない人向けです\nまずは麻雀の基本から学んでいきましょう')
    intro_frame0.label.pack()
    intro_tilebtn1 = tk.Button(intro_frame0, text="①麻雀牌の種類", height=10, width=80, command=intro_tilebtn1_click)
    intro_tilebtn1.pack()
    intro_agarikeibtn1 = tk.Button(intro_frame0, text="②4面子1雀頭のアガり形", height=8, width=80, command=intro_agarikeibtn1_click)
    intro_agarikeibtn1.pack()
    intro_yakubtn1 = tk.Button(intro_frame0, text="③役を覚える", height=8, width=80, command=intro_yakubtn_click)
    intro_yakubtn1.pack()
    
def title_btn2_click():
    global root_beginner
    root.destroy()
    root_beginner = tk.Tk()
    root_beginner.geometry('1200x700')
    root_beginner.title('ルールを覚えた人向け(初級者編)')
    
def intro_tilebtn1_click():
    global intro_frame1
    intro_frame0.label.destroy()
    intro_frame0.destroy()
    intro_frame1 = tk.Frame(root)
    intro_frame1.label = tk.Label(root,font=('MSゴシック','20','bold'), text='まず麻雀に使用する道具に「牌(パイ、ハイ)」と呼ばれるものがあります\nこれは27種の数牌(すうはい、かずはい)と7種の字牌(じはい)から成り、\n1種類につき4個存在するので使用する総数は34種×4枚＝136枚となります')
    intro_frame1.label.place(x=80,y=100)
    image = PIL.ImageTk.PhotoImage(image=PIL.Image.fromarray(all_tiles))

    canvas = tk.Canvas(root,bg="green")
    canvas.pack(expand = True,fill = tk.X)
    canvas.create_image(10,10,image=image)

    intro_tilebtn2 = tk.Button(root,text="次へ", width=8, command=intro_tilebtn2_click)
    intro_tilebtn2.place(x=1100,y=300)
        
def intro_tilebtn2_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="麻雀はこの136枚の牌から14枚の牌を手牌とし、\n特定の形に揃えてアガリを目指すゲームです")
    intro_frame1.label.place(x=300,y=100)
    intro_tilebtn3 = tk.Button(root,text="次へ", width=8, command=intro_tilebtn3_click)
    intro_tilebtn3.place(x=1100,y=300)
        
def intro_tilebtn3_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="数牌は漢数字で数字が描かれた萬子(マンズ)\n丸の数で数字を表す筒子(ピンズ)\n竹のようなマークの数で数字を表す索子(ソーズ)\nの3種類があります\nトランプのハートやダイヤのようなものです")
    intro_frame1.label.place(x=250,y=50)
    intro_tilebtn4 = tk.Button(root,text="次へ",width=8,command=intro_tilebtn4_click)
    intro_tilebtn4.place(x=1100,y=300)
    
def intro_tilebtn4_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="数牌は中国語の1～9と萬(マン)、筒(ピン)、索(ソー)を合わせて呼びます\n例えば萬子の5であれば5(ウー)と萬(マン)を合わせて五萬(ウーマン)と呼びます\n始めたばかりの時は呼び方はそれほど重要ではありません\n「漢数字の4」や「竹の6」など、自分の覚えやすい呼び方で大丈夫です")
    intro_frame1.label.place(x=100,y=50)
    intro_tilebtn5 = tk.Button(root,text="次へ",width=8,command=intro_tilebtn5_click)
    intro_tilebtn5.place(x=1100,y=300)
        
def intro_tilebtn5_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="字牌には東南西北の4つからなる風牌と白發中の3つからなる三元牌があります\n風牌は順番に東(トン)、南(ナン)、西(シャー)、北(ペイ)と読みます\n三元牌は順番に白(ハク)、發(ハツ)、中(チュン)と読みます")
    intro_frame1.label.place(x=100,y=50)
    intro_tilebtn6 = tk.Button(root,text="次へ",width=8,command=intro_tilebtn6_click)
    intro_tilebtn6.place(x=1100,y=300)
    
def intro_tilebtn6_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="日本とは違い、麻雀における方角の順番は東→南→西→北です\nまた三元牌の順番も白→發→中です\n後に登場する「ドラ」の理解に必要なので間違えないようにしましょう")
    intro_frame1.label.place(x=150,y=50)
    intro_tilebtn7 = tk.Button(root,text="次へ",width=8,command=intro_tilebtn7_click)
    intro_tilebtn7.place(x=1100,y=300)
    
def intro_tilebtn7_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="以上の34種の牌を使って麻雀はプレイされます\n次からは何をすればアガリになるのかを見ていきます")
    intro_frame1.label.place(x=250,y=50)
    
def intro_agarikeibtn1_click():
    global intro_frame1
    intro_frame0.label.destroy()
    intro_frame0.destroy()
    intro_frame1 = tk.Frame(root)
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="麻雀では14枚の牌を手牌とし\n基本的には「4面子1雀頭」の形を完成させるとアガリとなります")
    intro_frame1.label.place(x=220,y=50)
    
    canvas = tk.Canvas(root,bg="green")
    canvas.pack(expand = True,fill = tk.X)
    image = PIL.ImageTk.PhotoImage(image=PIL.Image.fromarray(all_tiles))
    canvas.create_image(10,10,image=image)
    intro_agarikeibtn2 = tk.Button(root,text="次へ",width=8,command=intro_agarikeibtn2_click)
    intro_agarikeibtn2.place(x=1100,y=300)
    
def intro_agarikeibtn2_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="まずは面子(メンツ)の説明です\n面子とはある3つの牌の組み合わせをひとまとめにして1面子にします\nではその3つの牌の組み合わせとは何か?\nそれは「連続する3つの同じ色の数牌」(順子)または「3つの同じ牌」(刻子)です")
    intro_frame1.label.place(x=100,y=50)
    intro_agarikeibtn3 = tk.Button(root,text="次へ",width=8,command=intro_agarikeibtn3_click)
    intro_agarikeibtn3.place(x=1100,y=300)
    
def intro_agarikeibtn3_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="「連続する3つの同じ色の数牌」(順子)は123,678等といったものですが\n注意するべき点がいくつかあります\n①891、912等9から1はループして繋がりません\n②同じ色限定なので筒子と索子、萬子と筒子等は繋がりません\n③字牌は順子にはなりません、東南西、白發中は繋がりません")
    intro_frame1.label.place(x=150,y=50)
    intro_agarikeibtn4 = tk.Button(root,text="次へ",width=8,command=intro_agarikeibtn4_click)
    intro_agarikeibtn4.place(x=1100,y=300)
    
def intro_agarikeibtn4_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="「3つの同じ牌」(刻子)は文字通り同じ牌を3つ集めると面子となります\nこれはどの牌でも面子になるので数牌でも字牌でも3つ集めると面子になります")
    intro_frame1.label.place(x=100,y=50)
    intro_agarikeibtn5 = tk.Button(root,text="次へ",width=8,command=intro_agarikeibtn5_click)
    intro_agarikeibtn5.place(x=1100,y=300)
    
def intro_agarikeibtn5_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="次は雀頭の説明です\n雀頭の定義は「2つの同じ牌」(対子)です\n面子の条件の1つである「3つの同じ牌」より易しいですね")
    intro_frame1.label.place(x=200,y=50)
    intro_agarikeibtn6 = tk.Button(root,text="次へ",width=8,command=intro_agarikeibtn6_click)
    intro_agarikeibtn6.place(x=1100,y=300)

def intro_agarikeibtn6_click():
    intro_frame1.label.destroy()
    intro_frame1.label = tk.Label(root,font=("MSゴシック","20","bold"),text="基本的には雀頭(対子)を1つと面子(順子か刻子)を4つ集めるとアガリとなります\n「国士無双」と「七対子」は例外的に4面子1雀頭の形ではありません\nこの2つについては次の「役」の説明で見ていきましょう")
    intro_frame1.label.place(x=100,y=50)
    
def intro_yakubtn_click():
    global intro_frame1
    intro_frame0.destroy()
    intro_frame1 = tk.Frame(root)
    intro_frame1.label = tk.Label(intro_frame1,font=("MSゴシック","20","bold"),text="麻雀の役は40以上あります\nまずは基本的な役を覚えましょう")
    intro_frame1.label.place(x=10,y=10)
    one_han_yaku_btn = tk.Button(intro_frame1,text="1翻役", height=8, width=50, command=one_han_yaku_btn_click)
    one_han_yaku_btn.place(x=1,y=10)
    
def one_han_yaku_btn_click():
    intro_frame1.destroy()
    
#ウィンドウの生成
global root
root = tk.Tk()
root.title('麻雀初心者支援ツール')
root.geometry('1200x700')   #*ではなく小文字のxで記述
main_frame = tk.Frame(root)
main_frame.pack(fill = tk.BOTH, pady=20)
global title_btn1
title_btn1 = tk.Button(main_frame, width=80,height=10,font=('MSゴシック','15','bold'),text = 'ルールがわからない人向け',anchor=tk.CENTER,command=title_btn1_click)
title_btn1.pack(fill = 'x', padx=100)
global title_btn2
title_btn2 = tk.Button(main_frame, width=80,height=10,font=('MSゴシック','15','bold'),text='ルールを覚えた人向け',anchor=tk.CENTER,command=title_btn2_click)
title_btn2.pack(fill='x', padx=100)

root.mainloop()

試したこと

ソースコードの順番を変えたりしましたが"ji2"にKeyErrorが出てしまいました。
上記のソースコードはエラーメッセージが表示されないので原因もわかりません。
どうぞよろしくお願い致します。

Answer 1

コールバック関数の最後に root_beginner.update() を入れてみて下さい(intro_agarikeibtn1_click でも同様)。

def intro_tilebtn1_click():
    global root_beginner
    global intro_frame1
              :

    canvas.create_image(10,10,image=image)

    intro_tilebtn2 = tk.Button(root,text="次へ", width=8, command=intro_tilebtn2_click)
    intro_tilebtn2.place(x=1100,y=300)
    root_beginner.update()

Answer 2

問題の原因: PhotoImage はデストラクタで解放されるようになってる為、
ローカル変数の場合、画像は関数を抜けた時に破棄されて
エラーは出ないが画像も表示されない状態になります。

解決策:
PhotoImage を持つ変数 image を、
グローバルやインスタンス変数等、他の場所に残る様にして見て下さい。

予め読み込んでおけるなら、tile_images の様に
グローバルの辞書にPhotoImage オブジェクトを入れておくとよいです。

Comments

[takatoyo]

global image
image=PIL.ImageTk.PhotoImage(image=PIL.Image.fromarray(all_tiles))

を

all tiles = cv2.hconcat…(略

の下に入れて実行してみたのですが

AttributeError: 'PhotoImage' object has no　attribute'_PhotoImage__photo'

というエラーメッセージが表示されてしまいました
これは宣言の仕方に問題があるのでしょうか？

[teamikl]

PhotoImage 等のtkinter のオブジェクト生成は、
tkinter の初期化(root = tk.Tk())よりも後に行う必要があります。

## 同じエラーを再現するコード。解決策は事前の初期化
# tk.Tk() の行のコメントを外してみてください。
import tkinter as tk
from PIL import Image, ImageTk
# root = tk.Tk()
image = ImageTk.PhotoImage(Image.open("sample.png"))

----
構造的な問題ですが、
途中でrootを破棄しているのも問題を起こしやすくする要因です。

tk.Tk() と mainloop の呼び出しは、プログラム中で一度のみとするようにしてください。
複数のウィンドウを利用したい場合は、tk.Toplevel を用いて
iconify/withdrawメソッド で表示・非表示を切り替えるようにします。