KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
【Tkinter】canvas Widget内で描かれた、図形や画像を操作する

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

今回はTkinterで使われるcanvas Widget内で描かれた、図形や画像を操作する方法を解説致します。canvas Widgetを使ってみたい、図形や画像を操作する方法を知りたい方へおすすめです。最後までご覧いただけますと幸いです。

目次
  1. そもそもTkinterで利用されるcanvas Widgetとは?
    1. Tkinterの構成要素
  2. 下準備
  3. 図形や画像を操作する際に重要なタグと独自ID
    1. タグ
    2. 独自ID
  4. 図形や画像を操作するための関数
    1. addtag_all
    2. bbox
    3. coords
    4. dchars
    5. delete
    6. find_all
    7. gettags
    8. insert
    9. itemcget
    10. itemconfigure
    11. move
    12. moveto
    13. scale
    14. select_from, select_to
    15. select_clear
    16. select_item
    17. tag_bind, tag_unbind
    18. type
  5. まとめ
  6. 参考文献
目次を開く⬇︎

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

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

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

など多岐にわたります。

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

Tkinterの構成要素

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

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

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

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

次に実際に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        # create_ovalについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
30        canvas.create_oval(200, 100, 10, 20, fill='black')
31
32        # frame Widget(Frame)を親要素とした場合に、canvas Widgetをどのように配置するのか?
33        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
34        canvas.pack()
35
36# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
37if __name__ == "__main__":
38    # Windowを生成する。
39    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
40    root = tk.Tk()
41    app = Application(master=root)
42    # Windowをループさせて、継続的にWindow表示させる。
43    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
44    app.mainloop()

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

図形や画像を操作する際に重要なタグと独自ID

図形や画像を操作するためには、canvas Widgetで用意される関数を利用します。

ただし、canvas Widgetで用意される関数を利用するためには、どの図形や画像に対して操作(関数を実行)するのか指し示す必要があります。

どの図形や画像を操作するのか、指し示すために、タグ独自IDを活用します。

タグ

描画した図形や画像そのものを、自分好みの名前として管理し、図形や画像を操作するために利用します。図形や画像を描画する際にoptionとして、使用します。

タグは単数 or 複数つけられて、単数の場合tag='aiu', 複数の場合tag=('eo', 'kaki')と宣言します。

1# create_oval : 楕円を描画する関数
2# x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20
3# <option> 
4# tag(タグ) : 描画する楕円に対して、'hoge'と名前付けを行う。
5# タグを単数つける場合 tag='aiu', タグを複数つける場合 tag=('eo', 'kaki')
6canvas.create_oval(200, 100, 10, 20, fill='black', tag='hoge')

独自ID

描画した図形や画像そのものを、独自IDとして管理し、図形や画像を操作するために利用します。図形や画像を描画する際に、戻り値として取得できます。

1# create_oval : 楕円を描画する関数
2# x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20
3# 戻り値 : 独自ID
4id = canvas.create_oval(200, 100, 10, 20, fill='black')

図形や画像を操作するための関数

図形や画像を操作するための関数として

  • addtag_all
  • bbox
  • coords
  • dchars
  • delete
  • find_all
  • gettags
  • insert
  • itemcget
  • itemconfigure
  • move
  • moveto
  • scale
  • select_from, select_to
  • select_clear
  • select_item
  • tag_bind, tag_unbind
  • type

があります。順にみていきましょう。

addtag_all

addtag_all関数を利用すると、canvas Widget内で描画される全ての図形や画像にタグを付与できます。

1# canvas Widget内で描画される全ての図形や画像にタグを付与
2# 第一引数 : タグ名
3.addtag_all('タグ名')

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1def __init__(self, master=None):
2    ...
3    canvas.create_oval(200, 100, 10, 20, fill='black')
4
5+   canvas.create_oval(100, 300, 50, 20, fill='black')
6+   canvas.create_oval(50, 100, 10, 20, fill='black')
7
8+   canvas.addtag_all('hogehoge')

3つの楕円に対して、hogehogeと名付けられたタグがつけられます。

bbox

bbox関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の位置を取得できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の位置を取得
2# 第一引数 : タグ名 or 独自ID
3# 戻り値 : (x1座標, y1座標, x2座標, y2座標)
4.bbox('タグ名') or .bbox('独自ID')

で定義されます。戻り値として、 (x1座標, y1座標, x2座標, y2座標)が返されます。

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

1def __init__(self, master=None):
2    ...
3
4-   canvas.create_oval(200, 100, 10, 20, fill='black')
5+   canvas.create_oval(200, 100, 10, 20, fill='black', tag='test')
6
7+   print(canvas.bbox('test'))

以下の画像のように値が返されます。

coords

coords関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の位置や大きさを変更できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の位置や大きさを変更
2# 第一引数 : タグ名 or 独自ID
3# 第二引数以降 : x1座標, y1座標, x2座標, y2座標, ...
4# 第二引数以降を指定する際の注意点 : タグ名 or 独自IDに紐づく図形や画像を、描画する際の座標数に合わせて、引数を指定すること。
5# 例えば、create_rectangleの場合は、.coords('タグ名', x1, y1, x2, y2) or .coords('独自ID', x1, y1, x2, y2)
6# 例えば、create_textの場合は、.coords('タグ名', x1, y1) or .coords('独自ID', x1, y1)とする。
7# create_rectangle, create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
8.coords('タグ名', x1, y1, x2, y2, ...) or .coords('独自ID', x1, y1, x2, y2, ...)

で定義されます。戻り値はありません。

coords関数を利用する際は、タグ名 or 独自IDに紐づく図形や画像を、描画する際の座標数 = 第二引数以降の数として、関数を実行ください。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_rectangle(100, 200, 200, 300, tag="testtest", fill='black')
3+    canvas.coords('testtest', 100, 100, 200, 300)

canvas.coords('testtest', 100, 100, 200, 300)を付けない場合、以下のように描画されますが、

canvas.coords('testtest', 100, 100, 200, 300)を付けると、以下のように描画されます。

dchars

dchars関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の文字を削除 or 図形や画像の文字列を削除できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の文字を削除の場合
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : 開始index(文字位置)
4# create_textで描画される文字列に対してのみ有効。
5.dchars('タグ名', '開始index(文字位置)') or .dchars('独自ID', '開始index(文字位置)')
6
7# 指定するタグ名 or 独自IDに該当する、図形や画像の文字列を削除の場合
8# 第一引数 : タグ名 or 独自ID
9# 第二引数 : 開始index(文字位置)
10# 第三引数 : 終わりindex(文字位置)
11# create_textで描画される文字列に対してのみ有効。
12# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
13.dchars('タグ名', '開始index(文字位置)', '終わりindex(文字位置)') or .dchars('独自ID', '開始index(文字位置)', '終わりindex(文字位置)')

で定義されます。戻り値はありません。

dchars関数は、create_textで描画される文字列に対してのみ有効です。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
3+    canvas.dchars('testtest', 0)

以下の画像のように、先頭の'テ'の文字を削除して、canvas Widgetを描画します。

また下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
3+    canvas.dchars('testtest', 0, 2)

以下の画像のように、先頭の'テスト'の文字を削除して、canvas Widgetを描画します。

delete

delete関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像を全て削除できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像を全て削除
2# 第一引数 : タグ名 or 独自ID
3.delete('タグ名') or .delete('独自ID')

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3+    canvas.delete('testtest')

以下の画像のようにcanvas Widgetを描画します。

find_all

find_all関数を利用すると、描画される図形や画像の独自ID一覧を取得できます。

1# 描画される図形や画像の独自ID一覧を取得
2# 戻り値 : (独自ID1, 独自ID2, ...)
3.find_all()

で定義されます。戻り値として、(独自ID1, 独自ID2, ...)が返されます。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1+    canvas.create_oval(100, 200, 30, 40, fill='black')
2+    print(canvas.find_all())

以下の画像のように値が返されます。

gettags

gettags関数を利用すると、指定するタグ名 or 独自IDに該当する図形や画像の、タグ名一覧を取得できます。

1# 指定するタグ名 or 独自IDに該当する図形や画像の、タグ名一覧を取得
2# 第一引数 : タグ名 or 独自ID
3# 戻り値 : (タグ名1, タグ名2, ...)
4# 注意点 : タグ名を指定する場合、タグ名に紐づく全ての図形や画像の、タグ名一覧を取得しない。始めてタグ名として宣言した、図形や画像に関するタグ名一覧を取得する。
5.gettags('タグ名') or .gettags('独自ID')

で定義されます。戻り値として、(タグ名1, タグ名2, ...)が返されます。

gettags関数を利用する際、第一引数へタグ名を指定する場合、タグ名に紐づく全ての図形や画像の、タグ名一覧を取得しない。始めてタグ名として宣言した、図形や画像に関するタグ名一覧を取得する。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3
4+    print(canvas.gettags('testtest'))

以下の画像のように値が返されます。

insert

insert関数を利用すると、指定するタグ名 or 独自IDに該当する図形や画像へ、文字列を挿入できます。

1# 指定するタグ名 or 独自IDに該当する図形や画像へ、文字列を挿入
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : 挿入先index(文字位置)
4# 第三引数 : 文字列
5# create_textで描画される文字列に対してのみ有効です。
6# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
7.insert('タグ名', index(文字位置), 文字列) or .insert('独自ID', index(文字位置), 文字列)

で定義されます。戻り値はありません。

insert関数は、create_textで描画される文字列に対してのみ有効です。

例えば下準備コードのcanvas.create_oval(100, 200, 30, 40, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(100, 200, 30, 40, fill='black')
2
3+    canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
4
5+    canvas.insert('testtest', 1, 'aiueo')

以下の画像のように、'テ'の後に'aiueo'の文字列を挿入して、canvas Widgetを描画します。

itemcget

itemcget関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像で設定される、optionの値を取得できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像で設定される、optionの値を取得
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : option名
4# 戻り値 : optionの値
5.itemcget('タグ名', option名) or .itemcget('独自ID', option名)

で定義されます。戻り値として、optionの値が返されます。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2
3+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
4
5+    print(canvas.itemcget('testtest', 'fill'))

以下の画像のように、fill optionの値が返されます。

itemconfigure

itemconfigure関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像へ、optionの設定を行います。

1# 指定するタグ名 or 独自IDに該当する、図形や画像へ、optionの設定
2# 第一引数 : タグ名 or 独自ID
3# 第二引数以降 : option
4.itemconfigure('タグ名', option1, option2, ...) or .itemconfigure('独自ID', option1, option2, ...)

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3+    canvas.itemconfigure('testtest', fill='red')

以下の画像のようにcanvas Widgetを描画します。

move

move関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の移動を行います。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の移動
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : x座標の移動量(px), 正の値の場合、右に移動量分移動、負の値の場合、左に移動量分移動
4# 第三引数 : y座標の移動量(px), 正の値の場合、下に移動量分移動、負の値の場合、上に移動量分移動
5.move('タグ名', x座標の移動量(px), y座標の移動量(px)) or .move('独自ID', x座標の移動量(px), y座標の移動量(px))

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3
4+    canvas.move('testtest', 200, 100)

以下の画像のようにcanvas Widgetを描画します。

moveto

moveto関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の移動を行います。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の移動
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : 移動先x座標
4# 第三引数 : 移動先y座標
5.moveto('タグ名', x座標, y座標) or .moveto('独自ID', x座標, y座標)

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3
4+    canvas.move('testtest', 100, 100)

以下の画像のようにcanvas Widgetを描画します。

scale

scale関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の大きさを変更します。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の大きさを変更
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : xOffset : 図形や画像の大きさを変更した際に、x座標を微調整するもの
4# 第三引数 : yOffset : 図形や画像の大きさを変更した際に、y座標を微調整するもの
5# 第四引数 : x座標を拡張する倍数。デフォルト1.0。(x座標 x xScale)
6# 第五引数 : y座標を拡張する倍数。デフォルト1.0。(y座標 x yScale)
7.scale('タグ名', xOffset, yOffset, xScale, yScale) or .scale('独自ID', xOffset, yOffset, xScale, yScale)

で定義されます。戻り値はありません。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_rectangle(20, 30, 70, 80, fill='black', tag="testtest")
3+    canvas.scale('testtest', 10, 10, 2, 2)

canvas.scale('testtest', 10, 10, 2, 2)を付けない場合、以下のように描画されますが、

canvas.scale('testtest', 10, 10, 2, 2)を付けると、以下のように描画されます。

select_from, select_to

select_from, select_to関数を利用すると、指定するタグ名 or 独自IDに該当する、文字列の選択を行います。

1# 指定するタグ名 or 独自IDに該当する、開始index(文字位置)から終わりindex(文字位置)の間に当てはまる文字列を、選択状態にする。
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : 開始index(文字位置)
4# create_textで描画される文字列に対してのみ有効です。
5# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
6.select_from('タグ名', 開始index(文字位置)) or .select_from('独自ID', 開始index(文字位置))
7
8# 指定するタグ名 or 独自IDに該当する、開始index(文字位置)から終わりindex(文字位置)の間に当てはまる文字列を、選択状態にする。
9# 第一引数 : タグ名 or 独自ID
10# 第二引数 : 終わりindex(文字位置)
11# create_textで描画される文字列に対してのみ有効です。
12# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
13.select_to('タグ名', 終わりindex(文字位置)) or .select_to('独自ID', 終わりindex(文字位置))

で定義されます。戻り値はありません。

select_from, select_to関数は、create_textで描画される文字列に対してのみ有効です。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
3+    canvas.select_from('testtest', 2)
4+    canvas.select_to('testtest', 4)

以下の画像のように'トテス'を選択状態にします。

select_clear

select_clear関数を利用すると、文字列の選択を解除できます。

1# 文字列の選択を解除
2# create_textで描画される文字列に対してのみ有効です。
3# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
4.select_clear()

で定義されます。戻り値はありません。

select_clear関数は、create_textで描画される文字列に対してのみ有効です。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-   canvas.create_oval(200, 100, 10, 20, fill='black')
2+   canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
3+   canvas.select_from('testtest', 2)
4+   canvas.select_to('testtest', 4)
5+   canvas.select_clear()

以下の画像のように、'トテス'の選択状態を解除できます。

select_item

select_item関数を利用すると、選択されている文字列の独自IDを取得できます。

1# 選択されている文字列の独自IDを取得
2# 戻り値 : 独自ID or None
3# create_textで描画される文字列に対してのみ有効です。
4# create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
5.select_item()

で定義されます。戻り値は独自IDが返されます。選択されている文字列がない場合は、Noneが返されます。

select_item関数は、create_textで描画される文字列に対してのみ有効です。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-   canvas.create_oval(200, 100, 10, 20, fill='black')
2+   canvas.create_text(250, 250, text="テストテスト", fill='black', tag="testtest")
3+   canvas.select_from('testtest', 2)
4+   canvas.select_to('testtest', 4)
5+   print(canvas.select_item())

以下の画像のように、独自IDの値を取得できます。

tag_bind, tag_unbind

tag_bind, tag_unbind関数を利用すると、「イベントと関数の実行」の紐づけを登録・削除できます。

1# 「イベントと関数の実行」の紐づけを登録
2# 第一引数 : タグ名 or 独自ID
3# 第二引数 : sequence(イベント内容(ボタンを選択する、文字を入力するなど)を設定)
4# 第三引数 : func(第二引数のイベント内容(ボタンを選択する、文字を入力するなど)が実行された場合に、呼ばれる関数を設定)
5# 第四引数(任意) : add('+' or ''(デフォルト)を設定する。一つ前に宣言されるtag_bind関数を実行するのか設定するために利用される。)
6# ''の場合、一つ前のtag_bind関数で宣言された関数(第三引数)を実行しないで、今回tag_bindする関数を実行する。
7# '+'の場合、一つ前のtag_bind関数で宣言された関数(第三引数)を実行して、今回tag_bindする関数を実行する。
8# 戻り値 : なし
9# bindについて : https://kuroro.blog/python/eI5ApJE1wkU7bHsuwk0H/
10.tag_bind('タグ名', sequence, func, add) or .tag_bind('独自ID', sequence, func, add)
11
12# 「イベントと関数の実行」の紐づけを削除
13# 第一引数 : タグ名 or 独自ID
14# 第二引数 : sequence(イベント内容(ボタンを選択する、文字を入力するなど)を設定)
15# 戻り値 : なし
16# bindについて : https://kuroro.blog/python/eI5ApJE1wkU7bHsuwk0H/
17.tag_unbind('タグ名', sequence) or .tag_unbind('独自ID', sequence)

で定義されます。戻り値はありません。

「イベントと関数の実行」の紐づけに関しては、【コード付】Tkinterで使われるbindとは?bindの仕組みを交えて解説で詳しくまとめていますので、是非ご確認ください。

例えば下準備コードへ、以下のコードを記述して、

1class Application(tk.Frame):
2+    def helloWorld(self, event):
3+        print('hello world')
4
5     def __init__(self, master=None):
6         ...
7-        canvas.create_oval(200, 100, 10, 20, fill='black')
8+        canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
9+        canvas.tag_bind('testtest', '<ButtonPress>', self.helloWorld)

描画される楕円を選択すると、以下の画像のように'hello world'が出力されます。

type

type関数を利用すると、指定するタグ名 or 独自IDに該当する、図形や画像の種類を取得できます。

1# 指定するタグ名 or 独自IDに該当する、図形や画像の種類を取得
2# 第一引数 : タグ名 or 独自ID
3# 戻り値 : 図形や画像の種類('arc' : create_arc, 'bitmap' : create_bitmap, 'image' : create_image, 'line' : create_line, 'oval' : create_oval, 'polygon' : create_polygon, 'rectangle' : create_rectangle, 'text' : create_text, 'window' : create_window)
4.type('タグ名') or .type('独自ID')

で定義されます。戻り値は、図形や画像の種類('arc' or 'bitmap' or 'image' or 'line' or 'oval' or 'polygon' or 'rectangle' or 'text' or 'window')が返されます。

例えば下準備コードのcanvas.create_oval(200, 100, 10, 20, fill='black')の下へ、以下のコードを記述すると、

1-    canvas.create_oval(200, 100, 10, 20, fill='black')
2+    canvas.create_oval(200, 100, 10, 20, fill='black', tag='testtest')
3+    print(canvas.type('testtest'))

以下の画像のように、'oval'の値を取得できます。

まとめ

  • Tkinterの構成要素として、Window, Frame, Widgetの概念が存在する。
  • 図形や画像を操作するためには、canvas Widgetで用意される関数を利用する。
  • 操作する図形や画像を定めるために、タグ独自IDが利用される。

参考文献