作成日 : 2021-05-22
更新日 : 2021-11-04
62 min readPythonTkinter

【Tkinter】canvas Widget内へ図形や画像を描画する

今回はcanvas Widget内へ図形や画像を描画する方法を解説いたします。図形や画像を描画する方法がわからない、サンプルコードを交えてcanvas Widgetを学びたい方へおすすめです。ぜひ最後までご覧ください。

そもそもTkinterで利用されるcanvas Widgetとは?

Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。

具体的にどのような図形や画像を描画できるのか説明すると、

• 直線(折線)
• 楕円
• 扇形
• 矩形
• 多角形
• 画像
• 文字列
• Widget

など多岐にわたります。

聞き慣れない言葉がいくつか出てきましたね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

前の章でTkinterで活用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものとお伝えしました。

「Tkinterの構成要素」の画像内では、青色枠に該当するWidgetに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にcanvas Widget内へ図形や画像を描画する方法を理解していきましょう。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、canvas Widget内へ図形や画像を描画する方法に関してお伝え致します。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できればコードに触れて、一緒にcanvas Widgetを体験しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15
16        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
17        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
18        frame.pack()
19
20        # frame Widget(Frame)を親要素として、canvas Widgetを作成する。
21        # width : 幅の設定
22        # height : 高さの設定
23        # background : 背景色の設定
24        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
25        # Canvasについて : https://kuroro.blog/python/V63iINoXI8iwMeRMEJPK/
26        canvas = tk.Canvas(frame, width=500, height=500, background="white")
27
28        # create_oval : 楕円を描く関数
29        canvas.create_oval(200, 100, 10, 20, fill='black')
30
31        # frame Widget(Frame)を親要素とした場合に、canvas Widgetをどのように配置するのか?
32        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
33        canvas.pack()
34
35# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
36if __name__ == "__main__":
37    # Windowを生成する。
38    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
39    root = tk.Tk()
40    app = Application(master=root)
41    # Windowをループさせて、継続的にWindow表示させる。
42    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
43    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

【9種類】canvas Widget内へ図形や画像を描画するための関数

canvas Widget内へ図形や画像を描画するためには、用意される関数を利用する必要があります。

関数の種類としては、

• create_line
• create_oval
• create_arc
• create_rectangle
• create_polygon
• create_image
• create_bitmap
• create_text
• create_window

の9種類存在します。順に見ていきましょう。

create_line

create_line関数を利用すると、直線(折線)を描画できます。

1# 戻り値 : 直線(折線)に紐づく独自ID
2.create_line(x1座標, y1座標, x2座標, y2座標, x3座標, y3座標..., option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x2座標, y2座標) -> (x3座標, y3座標) ...の点をつなぎ合わせて線を生成するイメージです。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30
3+    # option : fill(線を引くときの色を設定)
4+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
5+    # 戻り値 : 直線(折線)に紐づく独自ID
6+    canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black')

以下の画像のように直線(折線)を作成します。

create_lineで使われるoptionの種類としては、以下のようになります。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30
3+    # <option> 
4+    # fill : 描画する線の色を設定
5+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6+    # dash : 描画する線を破線にする。10 : 破線の線の長さ, 5 : 破線の間の空白の長さ
7+    # dashoffset : 破線の開始位置を指定する。最初に描画される破線の線の長さが、2となる。
8+    # capstyle : 破線の端を丸みのデザインへ変更する。
9+    # width : 破線の太さを変更する。
10+    # 戻り値 : 直線(折線)に紐づく独自ID
11+    canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5), dashoffset=8, capstyle=tk.ROUND, width=5)

以下の画像のように直線(折線)を作成します。

create_oval

create_oval関数を利用すると、楕円を描画できます。

1# 戻り値 : 楕円に紐づく独自ID
2.create_oval(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形に、接する楕円を生成します。

例えば下準備で紹介したコードを実行すると、以下の画像のように楕円を作成します。

create_ovalで使われるoptionの種類としては、以下のようになります。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20
4+    # <option> 
5+    # fill : 楕円の背景色を設定
6+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
7+    # outline : 楕円の円周の色を変更する。
8+    # 戻り値 : 楕円に紐づく独自ID
9+    canvas.create_oval(200, 100, 10, 20, fill='pink', outline='green')

以下の画像のように楕円を作成します。

create_arc

create_arc関数を利用すると、円弧(扇形)を描画できます。

1# 戻り値 : 円弧(扇形)に紐づく独自ID
2.create_arc(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形内で、接する楕円の一部分(円弧(扇形)を生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20
4+    # option : fill(円弧(扇形)の背景色を設定)
5+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6+    # 戻り値 : 円弧(扇形)に紐づく独自ID
7+    canvas.create_arc(200, 100, 10, 20, fill='black')

以下の画像のように円弧(扇形)を作成します。

create_arcで使われるoptionの種類としては、以下のようになります。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20
4+    # <option> 
5+    # fill : 円弧(扇形)の背景色を設定
6+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
7+    # start : 楕円のどの角度から円弧(扇形)として描画するのか設定
8+    # extent : 角度を指定して、円弧(扇形)の大きさを設定
9+    # style : 描画する図形の種類を設定する。
10+    # 戻り値 : 円弧(扇形)に紐づく独自ID
11+    canvas.create_arc(200, 100, 10, 20, fill='pink', start=30, extent=60, style=tk.CHORD)

以下の画像のように円弧(扇形)を作成します。

create_rectangle

create_rectangle関数を利用すると、矩形を描画できます。

1# 戻り値 : 矩形に紐づく独自ID
2.create_rectangle(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形を生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20
4+    # option : fill(矩形の背景色を設定)
5+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6+    # 戻り値 : 矩形に紐づく独自ID
7+    canvas.create_rectangle(200, 100, 10, 20, fill='black')

以下の画像のように矩形を作成します。

create_rectangleで使われるoptionの種類としては、以下のようになります。

create_polygon

create_polygon関数を利用すると、多角形を描画できます。

1# 戻り値 : 多角形に紐づく独自ID
2.create_polygon(x1座標, y1座標, x2座標, y2座標, x3座標, y3座標..., option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x2座標, y2座標) -> (x3座標, y3座標)...(x1座標, y1座標)の点を繋いだ形を生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30
4+    # option : fill(多角形の背景色を設定)
5+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6+    # 戻り値 : 多角形に紐づく独自ID
7+    canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black')

以下の画像のように多角形を作成します。

create_polygonで使われるoptionの種類としては、以下のようになります。

create_image

create_image関数を利用すると、画像を描画できます。

1# 戻り値 : 画像に紐づく独自ID
2.create_image(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)を画像の中心として生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # 画像を読み込む。
4+    # .png拡張子以外の画像を扱う場合は、PILライブラリを活用する。
5+    # 画像について : https://kuroro.blog/python/Z7k1LSyDyiDHtD5UCjmG/
6+    canvas.photo = tk.PhotoImage(file="/path_to/xxx.png")
7+    # 第一引数 x座標 : 200
8+    # 第二引数 y座標 : 200
9+    # <option>
10+    # image : 表示するimage情報
11+    # 戻り値 : 画像に紐づく独自ID
12+    canvas.create_image(200, 200, image=canvas.photo)

以下の画像のように画像を作成します。

画像の取り扱いに関しては、【もう間違えない!?】PythonのTkinterを用いて画像を表示する方法でまとめましたので、うまく表示されない、サンプルコードを確認したい方はご確認ください。

create_imageで使われるoptionの種類としては、以下のようになります。

create_bitmap

create_bitmap関数を利用すると、bitmap画像を描画できます。

1# 戻り値 : bitmap画像に紐づく独自ID
2.create_bitmap(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)をbitmap画像の中心として生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # 第一引数 x座標 :50
4+    # 第二引数 y座標 : 50
5+    # <option>
6+    # bitmap : 表示するbitmap画像情報
7+    # background : 背景色
8+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
9+    # 戻り値 : bitmap画像に紐づく独自ID
10+    canvas.create_bitmap(50, 50, bitmap="error", background='black')

以下の画像のようにbitmap画像を描画できます。

create_bitmapで使われるoptionの種類としては、以下のようになります。

create_text

create_text関数を利用すると、文字列を描画できます。

1# 戻り値 : 文字列に紐づく独自ID
2.create_text(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)を文字列の中心として生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # 第一引数 x座標 : 50
4+    # 第二引数 y座標 : 50
5+    # <option>
6+    # text : 文字列
7+    # fill : 文字列色
8+    # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
9+    # 戻り値 : 文字列に紐づく独自ID
10+    canvas.create_text(50, 50, text="テストテスト", fill='black')

以下の画像のように文字列を作成します。

create_textで使われるoptionの種類としては、以下のようになります。

create_window

create_window関数を利用すると、Widgetを描画できます。

1# 戻り値 : Widgetに紐づく独自ID
2.create_window(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)をWidgetの中心として生成します。

例えば下準備で紹介したコードを以下のように変更すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    # 第一引数 : x座標 : 250
4+    # 第二引数 : y座標 : 250
5+    # 第三引数以降 : option
6+    # window : 表示したいWidgetを設定。今回はlabel Widgetを設定する。
7+    # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
8+    # 戻り値 : Widgetに紐づく独自ID
9+    canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25))

以下の画像のようにWidgetを作成します。

label Widgetに関しては、【初学者必見!?】Tkinterで使われるlabelの活用方法を徹底解説でまとめておりますので、是非ご確認ください。

create_windowで使われるoptionの種類としては、以下のようになります。

まとめ

• Tkinterの構成要素として、Window, Frame, Widgetの概念が存在する。
• Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。

参考文献

• Tkinterのcanvasへ図形や画像を描画するサンプルコード
• 折線とは?
• 楕円とは?
• 扇形とは?
• 矩形とは?
• マウスカーソルとは?
• タグとは?
• 弦とは?
• bitmap画像とは?
• bitmap画像の種類
• 文字列の折り返しとは?