PythonでGUI作成 tkinterでcanvasウィジェットを使って画像を描画する方法

  • URLをコピーしました!

今回はPythonで作成したフォーム上に画像を描画する方法として、tkinterのcanvasウィジェットの使い方を解説していきたいと思います。

また、フォームの作成や他のウィジェットの使い方については以下の記事で解説していますので、あわせてご覧ください。

目次

tkinterとは

TkinterはGUI(グラフィカルユーザーインタフェース)を実装するためのPythonの標準ライブラリです。ボタンやテキストボックス、画像表示などユーザーがキーボードやマウスで操作可能なインタフェースを構築することができます。

公式ドキュメントは以下から参照できます。

canvasで利用可能なオブジェクト

canvasとはtkinterで使用できるウィジェットの1つです。canvasを使用することで図を描画したり、画像を表示することが可能です。
canvasで利用可能なオブジェクト、メソッドは以下の通りです。

オブジェクトメソッド機能
arccreate_arc円弧を表示する。
bitmapcreate_bitmaptkinterで用意されている以下のビットマップを表示する。
error、gray12、gray25、gray50、gray75、hourglass、info、questhead、question、warning
imagecreate_image画像を表示する。
linecreate_line直線、または曲線を表示する。
ovalcreate_oval楕円を表示する。
polygoncreate_polygon多角形を表示する。
rectanglecreate_rectangle四角形を表示する。
textcreate_text文字列を表示する。
windowscreate_windowウィンドウを表示する。ウィンドウは1つのウィジェットを保持できる長方形の領域ですcanvs上で他のウィジェットを使用したい場合に使用します。
canvasのオブジェクト一覧

作成したソースコード

今回はサンプルとして四角形と楕円を表示するプログラムを作成しました。

コード解説

まずはベースとなる描画エリアを作成します。今回はわかりやすいように描画エリアを黒で表示するようにしました。

#フォーム上に描画エリアを作成
canvas = tk.Canvas(
    root,
    width=400,
    height=400,
    background="#000"
)
canvas.pack()

例として四角形を描画します。create_rectangleの引数は座標、色、tagとなっています。tagは複数のオブジェクトが重なった場合の表示順序などをを指定する際、各オブジェクトを識別するために使用します。

#四角形を描画する
canvas.create_rectangle(
    20, 20, 200, 200,
    fill="red",
    tag="rect_001"
)

全体のソースコード

import tkinter as tk

#ウィンドウを作成
root = tk.Tk()

#ウィンドウサイズを指定
root.geometry("640x480")

#ウィンドウタイトルを指定
root.title('canva test')

#フォーム上に描画エリアを作成
canvas = tk.Canvas(
    root,
    width=400,
    height=400,
    background="#000"
)
canvas.pack()

#四角形を描画する
canvas.create_rectangle(
    20, 20, 200, 200,
    fill="red",
    tag="rect_001"
)

#楕円を描画する
canvas.create_oval(
    200, 200, 350, 300,
    fill="yellow",
    tag="oval_001"
)

#ウィンドウ表示継続
root.mainloop()

実行結果

プログラムを実行すると以下のようなフォームが表示されました。
四角形、楕円とも指定した座標に描画されているのが確認できました。

まとめ

今回はtkinterのcanvasモジュールについて解説しました。フォーム上に図を描画したり画像を表示したしたいときにぜひ活用してみてください。

また、Tkinterを使ったGUI作成について動画で学びたい方は以下の講座もおすすめです。

0から始めるTkinterの使い方完全マスター講座〜Python×GUIの基礎・応用〜 icon


それでは、また次の記事でお会いしましょう。

参考

よかったらシェアしてね!
  • URLをコピーしました!
目次