Tkinterのキャンバスに画像を入れてみよう。
最近のGUIは見た目が華やかですよね。
なのに、Tkinterはいたってシンプルです。
昔のVB時代を思い出すようなシンプルさですよね。
そんなTkinterもイラストとかをはめ込めばかわいくなるはず！ということで、今回はTkinterに画像をはめ込むことにしてみます。
とりあえず画像を準備！
まずはなんでもいいので、いれてみたい画像を準備しましょう。
今回はブログアイコンのこの子を表示させてみたいと思います。
ウィンドウの準備
まずはウィンドウを準備しましょう。
よくある640*480ピクセルサイズのウィンドウを作ってみましょう。
import tkinter #ウィンドウを作成する root = tkinter.Tk() root.title("らふのアイコン画面をウィンドウに表示させよう") #ウィンドウの最小サイズ root.minsize(640,480) #ウィンドウをループさせる root.mainloop()
これを実行すると以下のようなキャンバスが作れます。
画像ファイルを実際はめ込んでみよう
先ほどのブログアイコンを実際に設定してみましょう。
ブログアイコンは実行ファイルと同じ場所にimageフォルダを作成し、その中にicon.pngファイルを配置します。
#キャンバスを準備する canvas = tkinter.Canvas(bg = "white", width = 640,height = 480) canvas.place(x = 0,y = 0) #画像ファイルを指定する img_file = tkinter.PhotoImage(file = "image/icon.png") #画像ファイルをキャンバスの(0,0)に合わせて表示してみる canvas.create_image(0,0,image = img_file)
実行結果はこちら
これより、キャンバスの(0,0)に合わせて表示をすると、正しく表示されないことがわかります。
なんでこうなるの！？
キャンバスにイメージファイルを挿入する場合、(0,0)と指定するとどうしてこのように場所がずれるのでしょう？
イメージファイルは(0,0)の位置が、画像ファイルの中心部分になっています。
では、tkinterのキャンバスの(0,0)はどこでしょうか。
このようにキャンバスは中心が(0,0)ではなく、左上が(0,0)になっています。
これにより、キャンバスにイメージファイルを挿入するとき、
お互いの原点の位置がずれているため、正しく表示されませんでした。
画像を位置を正しく表示させてみよう
では、実際に正しく表示させてみましょう。
イメージファイルの原点を、キャンパスのどこに置きたいのか指定します。
今回は中心部分にイメージファイルを配置させたいため、(320,240)を指定します。
＜修正前＞
#画像ファイルをキャンバスの(0,0)に合わせて表示してみる canvas.create_image(0,0,image = img_file)
↓
＜修正後＞
#画像ファイルをキャンバスの中心(320,240)に合わせて表示してみる canvas.create_image(320,240,image = img_file)
実行してみましょう。
このように、キャンバスの位置に注意しながら表示させるように気をつけましょう。
まとめ
今回、Tkinterのキャンバスにアイコンのファイルを表示させてみました。
Tkinterのキャンバスの座標の原点の位置と、挿入したいイメージファイルの原点の位置が異なっていることがわかりました。
キャンバスにイメージファイルを挿入する際、座標の位置には十分気をつけて表示していきましょう。
＜最終更新日：2021/11/17＞
修正箇所：
・プログラミング修正後のコメントの部分を修正。
・投稿日と最終更新日の記載追加。
2021/11/06 投稿
