. Tkinter】canvas Widget内へ図形や画像を描画する | 「モノづくりから始まるエンジニア」
Tkinter】canvas Widget内へ図形や画像を描画する | 「モノづくりから始まるエンジニア」
Tkinter】canvas Widget内へ図形や画像を描画する | 「モノづくりから始まるエンジニア」

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

今回はTkinterで使われるcanvas Widgetの作成方法に関して、徹底解説いたします。canvas Widge.

【Tkinter】canvas Widget内で描かれた、図形や画像を操作する

【図解付き!?】Tkinterで使われるmainloopをわかりやすく解説

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

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

Tkinterの構成要素 名称説明文Window 画像の緑色枠の部分になります。Tkinter画面全体を表します。Frame画像内の紫色枠の部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。Widget青色枠で囲まれる部分になります。1つの機能を持つ最小単位 = Widgetと考えると良いでしょう。

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

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

下準備

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

1import tkinter as tk 2 3 class 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 36 if __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()

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

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

  • create_line
  • create_oval
  • create_arc
  • create_rectangle
  • create_polygon
  • create_image
  • create_bitmap
  • create_text
  • create_window
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') option名説明文用例activefill 描画する線の上にマウスカーソルが移動した場合に、線の色を変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activefill="pink") activedash描画する線の上にマウスカーソルを移動した場合に、破線へ変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activedash=(10, 5)) activewidth描画する線の上にマウスカーソルを移動した場合に、線の太さを変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activewidth=20) arrow描画する線へ矢印をつけます。指定方法として、tk.NONE(デフォルト。矢印をつけない), tk.FIRST(最初の点(x1, y1)へ矢印をつける), tk.BOTH(最初の点(x1, y1)、最後の点(xn, yn)へ矢印をつける), tk.LAST(最後の点(xn, yn)へ矢印をつける)があります。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', arrow=tk.LAST) arrowshape矢印の先の形を整形します。値の設定の仕方や作られる仕組みを知りたい方はこちらをご確認ください。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', arrow=tk.LAST, arrowshape=(20, 30, 3)) dash描画する線を破線にする。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5)) dashoffset破線の開始位置を変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5), dashoffset=8) state描画する線の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(描画する線を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, activefill="pink") disableddash描画する線の状態がtk.DISABLEDの場合に、線を破線にする。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disableddash=(10, 5)) disabledfill描画する線の状態がtk.DISABLEDの場合に、線の色を変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledfill='pink') disabledwidth描画する線の状態がtk.DISABLEDの場合に、線の太さを変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledwidth=5) fill描画する線の色を変更する。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='pink') capstyle描画する線の端のデザインを設定する。設定方法としては、tk.BUTT(平坦にする。デフォルト), tk.ROUND(丸める)があります。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=20, capstyle=tk.ROUND) joinstyle描画する線と線の繋ぎ目のデザインを設定する。設定方法としては、tk.BEVEL(平坦にする), tk.MITER(尖らせる), tk.ROUND(丸める。デフォルト)があります。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=20, joinstyle=tk.BEVEL) smooth描画する線を曲線として扱うか設定できます。Trueの場合、曲線として扱い、Falseの場合、直線として扱います。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True) splinesteps smooth=True の場合に働きます。曲線の滑らかさを設定できます。デフォルトの値は12で値を大きくすると、一段と滑らかになります。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True, splinesteps=30) width描画する線の太さを設定します。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=5) tag描画した線に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', tag=('xxx', 'yyy')) 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 + # 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点を繋いだ矩形に、接する楕円を生成します。

option名説明文用例activefill 楕円の上にマウスカーソルを移動した場合に背景色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', activefill='red') activeoutline楕円の上にマウスカーソルを移動した場合に、楕円の円周の色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red') activedash楕円の上にマウスカーソルを移動した場合に、楕円の円周を破線へ変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red', activedash=(10, 5)) activewidth楕円の上にマウスカーソルを移動した場合に、楕円の円周の太さを変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red', activewidth=5) outline楕円の円周の色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red') dash楕円の円周を破線にする。 canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5)) dashoffset楕円の円周を破線とした場合に、破線開始位置を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5), dashoffset=8) width楕円の円周の太さを設定します。円周の太さをなくしたい場合は、0を指定します。 canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', width=5) state楕円の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(楕円を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, activefill='red') fill楕円の背景色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink') disabledfill楕円の状態がtk.DISABLEDの場合に、楕円の背景色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledfill='red') disabledoutline楕円の状態がtk.DISABLEDの場合に、楕円の円周の色を変更する。 canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', state=tk.DISABLED, disabledoutline='green') disableddash楕円の状態がtk.DISABLEDの場合に、楕円の円周を破線にする。 canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='green', disableddash=(10, 5)) disabledwidth楕円の状態がtk.DISABLEDの場合に、楕円の円周の太さを変更する。※筆者のMac OS環境では変化がありませんでした。 canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='green', disabledwidth=10) tag描画した楕円に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_oval(200, 100, 10, 20, fill='pink', tag=('xxx', 'yyy')) 1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3 + # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4 + # 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') option名説明文用例activefill 円弧(扇形)の上にマウスカーソルを移動した場合に背景色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='black', activefill='red') activeoutline円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲の色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red') activedash円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲を破線へ変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red', activedash=(10, 5)) activewidth円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲の太さを変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red', activewidth=5) outline円弧(扇形)の周囲の色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red') dash円弧(扇形)の周囲を破線にする。 canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5)) dashoffset円弧(扇形)の周囲を破線とした場合に、破線開始位置を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5), dashoffset=8) width円弧(扇形)の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。 canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', width=5) state円弧(扇形)の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(円弧(扇形)を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, activefill='red') fill円弧(扇形)の背景色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink') disabledfill円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の背景色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledfill='red') disabledoutline円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲の色を変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red') disableddash円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲を破線にする。 canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5)) disabledwidth円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲の太さを変更する。 canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red', disabledwidth=5) tag描画した円弧(扇形)に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_arc(200, 100, 10, 20, fill='pink', tag=('xxx', 'yyy')) start楕円のどの角度から円弧(扇形)として描画するのか設定します。デフォルトは0(度)になります。 canvas.create_arc(200, 100, 10, 20, fill='pink', start=30) extent角度を指定して、円弧(扇形)の大きさを設定します。デフォルトは90(度)になります。 canvas.create_arc(200, 100, 10, 20, fill='pink', start=30, extent=120) style描画する図形の種類を選びます。種類としては、tk.PIESLICE(扇形。デフォルト。), tk.CHORD(弦), tk.ARC(円弧)になります。 canvas.create_arc(200, 100, 10, 20, fill='pink', outline='green', style=tk.ARC) 1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3 + # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4 + # 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') option名説明文用例activefill 矩形の上にマウスカーソルを移動した場合に背景色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', activefill='red') activeoutline矩形の上にマウスカーソルを移動した場合に、矩形の周囲の色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red') activedash矩形の上にマウスカーソルを移動した場合に、矩形の周囲を破線へ変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red', activedash=(10, 5)) activewidth矩形の上にマウスカーソルを移動した場合に、矩形の周囲の太さを変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red', activewidth=5) outline矩形の周囲の色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red') dash矩形の周囲を破線にする。 canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', dash=(10, 5)) dashoffset矩形の周囲を破線とした場合に、破線開始位置を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', dash=(10, 5), dashoffset=12) width矩形の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。 canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', width=5) state矩形の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(矩形を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, activefill='red') fill矩形の背景色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black') disabledfill矩形の状態がtk.DISABLEDの場合に、矩形の背景色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledfill='red') disabledoutline矩形の状態がtk.DISABLEDの場合に、矩形の周囲の色を変更する。 canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red') disableddash矩形の状態がtk.DISABLEDの場合に、矩形の周囲を破線にする。 canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5)) disabledwidth矩形の状態がtk.DISABLEDの場合に、矩形の周囲の太さを変更する。※筆者のMac OS環境では変化がありませんでした。 canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red', disabledwidth=5) tag描画した矩形に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_rectangle(200, 100, 10, 20, fill='black', tag=('xxx', 'yyy')) 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') option名説明文用例activefill 多角形の上にマウスカーソルを移動した場合に背景色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activefill='red') activeoutline多角形の上にマウスカーソルを移動した場合に、多角形の周囲の色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red') activedash多角形の上にマウスカーソルを移動した場合に、多角形の周囲を破線へ変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red', activedash=(10, 5)) activewidth多角形の上にマウスカーソルを移動した場合に、多角形の周囲の太さを変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red', activewidth=5) outline多角形の周囲の色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red') dash多角形の周囲を破線にする。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', dash=(10, 5)) dashoffset多角形の周囲を破線とした場合に、破線開始位置を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', dash=(10, 5), dashoffset=8) width多角形の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', width=5) state多角形の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(多角形を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, activefill='red') fill多角形の背景色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black') disabledfill多角形の状態がtk.DISABLEDの場合に、多角形の背景色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledfill='red') disabledoutline多角形の状態がtk.DISABLEDの場合に、多角形の周囲の色を変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red') disableddash多角形の状態がtk.DISABLEDの場合に、多角形の周囲を破線にする。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5)) disabledwidth多角形の状態がtk.DISABLEDの場合に、多角形の周囲の太さを変更する。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red', disabledwidth=5) tag描画した多角形に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', tag=('xxx', 'yyy')) joinstyle線と線の繋ぎ目のデザインを設定します。設定方法としては、tk.BEVEL(平坦にする), tk.MITER(尖らせる), tk.ROUND(丸める。デフォルト)があります。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', joinstyle=tk.BEVEL) smooth多角形を形作る線を曲線として扱うか設定できます。Trueの場合、曲線として扱い、Falseの場合、直線として扱います。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True) splinesteps smooth=True の場合に働きます。曲線の滑らかさを設定できます。デフォルトの値は12で値を大きくすると、一段と滑らかになります。 canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True, splinesteps=100) 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 + # 10 + # image : 表示するimage情報 11 + # 戻り値 : 画像に紐づく独自ID 12 + canvas.create_image(200, 200, image=canvas.photo)

【もう間違えない!?】PythonのTkinterを用いて画像を表示する方法

option名説明文用例activeimage 表示される画像へマウスカーソルを移動した時に、用意していたactiveimageの画像を表示する。 canvas.create_image(200, 200, image=canvas.photo, activeimage=image) anchor(x座標, y座標)と画像のどの位置を対応させて、画像を表示するのか設定する。指定方法として、tk.W(画像左の真ん中), tk.N(画像上の真ん中), tk.S(画像下の真ん中), tk.E(画像右の真ん中), tk.NE(画像右上), tk.NW(画像左上), tk.SW(画像左下), tk.SE(画像右下), tk.CENTER(画像の中心、デフォルト)が存在する。 canvas.create_image(200, 200, image=canvas.photo, anchor=tk.E) state画像の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(画像を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_image(200, 200, disabledimage=canvas.photo, state=tk.DISABLED) disabledimage画像の状態がtk.DISABLEDの場合に、disabledimageへ設定した画像を表示します。 canvas.create_image(200, 200, disabledimage=canvas.photo, state=tk.DISABLED) tag描画した画像に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_image(200, 200, image=canvas.photo, tag=('xxx', 'yyy')) image表示する画像情報を設定 canvas.create_image(200, 200, image=canvas.photo) 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 + # 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画像を描画できます。

option名説明文用例activebackground 表示されるbitmap画像へマウスカーソルを移動した時に、背景色を変更する。 canvas.create_bitmap(50, 50, bitmap="error", background='black', activebackground='red') activeforeground表示されるbitmap画像へマウスカーソルを移動した時に、bitmap画像の色を変更する。 canvas.create_bitmap(50, 50, bitmap="error", background='black', activeforeground='red') activebitmap表示されるbitmap画像へマウスカーソルを移動した時に、activebitmap optionのbitmap画像を表示する。 canvas.create_bitmap(50, 50, bitmap="error", background='black', activebitmap='info') anchor(x座標, y座標)とbitmap画像のどの位置を対応させて、bitmap画像を表示するのか設定する。指定方法として、tk.W(bitmap画像左の真ん中), tk.N(bitmap画像上の真ん中), tk.S(bitmap画像下の真ん中), tk.E(bitmap画像右の真ん中), tk.NE(bitmap画像右上), tk.NW(bitmap画像左上), tk.SW(bitmap画像左下), tk.SE(bitmap画像右下), tk.CENTER(bitmap画像の中心、デフォルト)が存在する。 canvas.create_bitmap(50, 50, bitmap="error", background='black', anchor=tk.W) statebitmap画像の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(bitmap画像を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_bitmap(50, 50, bitmap="error", background='black', state=tk.DISABLED, activebackground='red') tag描画したbitmap画像に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_bitmap(50, 50, bitmap="error", background='black', tag=('xxx', 'yyy')) background表示されるbitmap画像の背景色を変更する。 canvas.create_bitmap(50, 50, bitmap="error", background='black') foreground表示されるbitmap画像の色を変更する。 canvas.create_bitmap(50, 50, bitmap="error", foreground='red') bitmap表示したいbitmap画像を設定する。bitmap画像の種類を知りたい場合は、こちらのリンクを確認ください。 canvas.create_bitmap(50, 50, bitmap="error", foreground='red') disabledbackgroundbitmap画像の状態がtk.DISABLEDの場合に、背景色を変更します。 canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledbackground='red') disabledforegroundbitmap画像の状態がtk.DISABLEDの場合に、bitmap画像の色を変更します。 canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledforeground='red') disabledbitmapbitmap画像の状態がtk.DISABLEDの場合に、disabledbitmapへ設定するbitmap画像へ変更する。 canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledforeground='red', disabledbitmap="info") 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 + # 6 + # text : 文字列 7 + # fill : 文字列色 8 + # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 9 + # 戻り値 : 文字列に紐づく独自ID 10 + canvas.create_text(50, 50, text="テストテスト", fill='black') option名説明文用例activefill 文字列へマウスカーソルを移動した時に、文字列色を変更する。 canvas.create_text(50, 50, text="テストテスト", fill='black', activefill='red') anchor(x座標, y座標)と文字列のどの位置を対応させて、文字列を表示するのか設定する。指定方法として、tk.W(文字列左の真ん中), tk.N(文字列上の真ん中), tk.S(文字列下の真ん中), tk.E(文字列右の真ん中), tk.NE(文字列右上), tk.NW(文字列左上), tk.SW(文字列左下), tk.SE(文字列右下), tk.CENTER(文字列の中心、デフォルト)が存在する。 canvas.create_text(50, 50, text="テストテスト", fill='black', anchor=tk.E) text文字列を設定する。 canvas.create_text(50, 50, text="テストテスト", fill='black') fill文字列色を設定する。 canvas.create_text(50, 50, text="テストテスト", fill='red') tag描画した文字列に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_text(50, 50, text="テストテスト", fill='red', tag=('xxx', 'yyy')) state文字列の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(文字列を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。 canvas.create_text(50, 50, text="テストテスト", fill='black', state=tk.DISABLED, activefill='red') disabledfill文字列の状態がtk.DISABLEDの場合に、文字列色を変更する。 canvas.create_text(50, 50, text="テストテスト", fill='black', state=tk.DISABLED, disabledfill='red') width文字列の折り返し幅を設定する。 canvas.create_text(50, 50, text="テストテスト", width=50, fill='black') justify文字列の揃え方を設定する。設定の種類として、tk.LEFT(左寄せ、デフォルト), tk.CENTER(中央寄せ), tk.RIGHT(右寄せ)が存在する。 canvas.create_text(50, 50, text="テストテスト", fill='black', width=50, justify=tk.RIGHT) font文字列の形式や大きさを変更できます。fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめております。 canvas.create_text(50, 50, text="テストテスト", fill='black', font=("", 0, "underline")) 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))

【初学者必見!?】Tkinterで使われるlabelの活用方法を徹底解説

option名説明文用例anchor (x座標, y座標)とWidgetのどの位置を対応させて、Widgetを表示するのか設定する。指定方法として、tk.W(Widget左の真ん中), tk.N(Widget上の真ん中), tk.S(Widget下の真ん中), tk.E(Widget右の真ん中), tk.NE(Widget右上), tk.NW(Widget左上), tk.SW(Widget左下), tk.SE(Widget右下), tk.CENTER(Widgetの中心、デフォルト)が存在する。 canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), anchor=tk.E) tag描画したWidgetに対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、 tag='xxx' , タグを複数つける場合は、 tag=('xxx', 'yyy') とします。 canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), tag=('xxx', 'yyy')) stateWidgetの状態を設定する。設定できる値としては、tk.DISABLED, tk.HIDDEN(Widgetを表示しない), tk.NORMAL(デフォルト)になります。 canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), state=tk.DISABLED) height, widthそれぞれWidgetの高さ・幅を設定できます。 canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), height=100, width=50) window表示したいWidgetを設定します。 canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25))

まとめ

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

【サンプルコード付】Tkinterで使われるmessageboxの活用法を解説

Tkinterで使われるWidgetの一覧をまとめてみました!?

Tkinterで使われるgeometryとは?コードを通して活用方法を徹底解説

【コード付】Tkinterで使われるbindとは?bindの仕組みを交えて解説

Tkinterで使われるafterとは?活用方法から注意点まで徹底解説!?

参考文献

KURORO BLOG について

KURORO BLOG 「モノづくりから始まるエンジニア」をコンセプトに、コンテンツ発信を行っております。 エンジニア初学者やプログラミングに関心のある方々におすすめです。

KURORO / 黒光俊秀 KURORO BLOG 運営者 & 執筆者

【経歴】・2017年8月~2020年6月 株式会社終活ねっとのインターン ⏩ 正社員として勤務。メディア事業部のエンジニア責任者としてサービス運営を行い、月間1000万PVを達成。また2018年10月12日に、M&AによりDMMグループ入りを果たしました。・現在は KURORO BLOG 運営者 & 執筆者として活動中。【運営者コメント】Pythonに関してKURORO BLOGを通じて、わかりやすくお伝えしてまいります。記事に関してわかりにくい点や質問等ございましたら、こちらよりご連絡ください。一人でも多くのエンジニアが現れますようにプロフィール詳細

Copyright 2022 KURORO BLOG.

📎📎📎📎📎📎📎📎📎📎