KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
Tkinterで使われるcanvasとは?canvasの作成方法を徹底解説

Tkinterで使われるcanvasとは?canvasの作成方法を徹底解説

今回はTkinterで使われるcanvas Widgetの作成方法に関して、徹底解説いたします。canvas Widgetの作成方法がわからない、canvasに関して詳しく知りたい方へおすすめです。ぜひ最後までご覧ください。

目次
  1. そもそもTkinterで利用されるcanvas Widgetとは?
    1. Tkinterの構成要素
  2. 下準備
  3. canvas Widgetを作成する
    1. bg, background
    2. bd, borderwidth
    3. relief
    4. cursor
    5. height, width
    6. takefocus
    7. highlightcolor, highlightbackground, highlightthickness
    8. selectbackground, selectforeground
    9. selectborderwidth
    10. closeenough
    11. scrollbarに関連するoption
  4. まとめ
  5. 参考文献
目次を開く⬇︎

そもそも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に対して、編集することになります。

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 = tk.Canvas(frame, width=500, height=500, background="white")
26
27        # create_oval : 楕円を描く関数
28        # create_ovalについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
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の構成要素」で紹介した画像の結果が表示されます。

canvas Widgetを作成する

canvas Widgetは

1import tkinter as tk
2
3tk.Canvas(option1, option2, ...) or tk.Canvas('親要素', option1, option2, ...)

で作成できます。

canvas Widgetで使われるoptionの種類としては

  • bg, background
  • bd, borderwidth
  • relief
  • cursor
  • height, width
  • takefocus
  • highlightcolor, highlightbackground, highlightthickness
  • selectbackground, selectforeground
  • selectborderwidth
  • closeenough
  • scrollbarに関連するoption

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

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1import tkinter as tk
2
3# canvas Widgetを生成する。
4canvas = tk.Canvas()
5# canvas Widgetに関するoptionの種類一覧を取得する。
6print(canvas.keys())

bg, background

bg option, background optionを利用すると、canvas Widgetの背景色を設定できます。

bgとbackground両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="blue") or canvas.configure(width=500, height=500, background="blue")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="blue")

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

bd, borderwidth

bd option, borderwidth optionを利用すると、canvas Widgetの枠の大きさを設定できます。

bdとborderwidth両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", bd=50) or canvas.configure(width=500, height=500, background="white", bd=50)
4##################################
5# bd option : canvas Widgetの枠の大きさを設定。デフォルト0。
6canvas = tk.Canvas(frame, width=500, height=500, background="white", bd=50)

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

relief

relief optionを利用すると、canvas Widgetの枠のデザインを設定できます。

指定方法としては、

  • tk.RAISED
  • tk.SUNKEN
  • tk.FLAT
  • tk.RIDGE
  • tk.GROOVE
  • tk.SOLID

の6種類があります。

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

1+    reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
2+    for relief in reliefList:
3-    canvas = tk.Canvas(frame, width=500, height=500, background="white")
4+        canvas = tk.Canvas(frame, width=50, height=50, background="white", bd=20, relief=relief)
5+        canvas.pack(side=tk.LEFT)
6
7-    canvas.create_oval(200, 100, 10, 20, fill='black')
8-    canvas.pack()

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

relief optionはそもそも枠がなければ、効果を発揮できません。relief optionの設定に合わせて、borderwidth or bd optionを1以上に設定して利用しましょう。

cursor

cursor optionを利用すると、canvas Widget内へマウスカーソルを移動すると、矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", cursor='clock') or canvas.configure(width=500, height=500, background="white", cursor='clock')
4##################################
5canvas = tk.Canvas(frame, width=500, height=500, background="white", cursor='clock')

canvas Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

height, width

height option, width optionを利用すると、それぞれcanvas Widgetの高さ・幅を設定できます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=50, height=50, background="white") or canvas.configure(width=50, height=50, background="white")
4##################################
5canvas = tk.Canvas(frame, width=50, height=50, background="white")

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

takefocus

takefocus optionを利用すると、tabキーを押すことでcanvas Widgetへフォーカスをあてられます。

True(フォーカスをあてる), False(フォーカスを外す(デフォルト))で値を設定します。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", takefocus=True) or canvas.configure(width=500, height=500, background="white", takefocus=True)
4##################################
5canvas = tk.Canvas(frame, width=500, height=500, background="white", takefocus=True)

tabキーを押すとcanvas Widgetへフォーカスを当てられます。

highlightcolor, highlightbackground, highlightthickness

highlightcolor option, highlightbackground option, highlightthickness optionを利用すると、それぞれフォーカスがあてられた時の囲い線の色, フォーカスが外れた時の囲い線の色, 囲い線の太さを設定できます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue") or canvas.configure(width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue")

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

また下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True) or canvas.configure(width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True)
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True)

tabキーを押すと、以下の画像のようにcanvas Widgetを描画します。

selectbackground, selectforeground

selectbackground option, selectforeground optionを利用すると、それぞれ選択された文字列の背景色・文字列色を変更できます。

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

1- canvas = tk.Canvas(frame, width=500, height=500, background="white")
2+ canvas = tk.Canvas(frame, width=500, height=500, background="white", selectbackground='green', selectforeground='orange')
3
4- canvas.create_oval(200, 100, 10, 20, fill='black')
5+ # create_text : 文字列を描く関数
6+ # create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
7+ # tag option : 描画する文字列へ名前をつける。testとする。
8+ canvas.create_text(250, 250, text="テストテスト", tag='test', fill='black')
9
10+ # testと名付けられたcanvasの2~4文字目を選択状態に変更する。
11+ canvas.select_from("test", 2)
12+ canvas.select_to("test", 4)

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

selectborderwidth

selectborderwidth optionを利用すると、選択される文字列の外側へ作られる、枠の大きさを設定できます。

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

1- canvas = tk.Canvas(frame, width=500, height=500, background="white")
2+ canvas = tk.Canvas(frame, width=500, height=500, background="white", selectbackground='green', selectforeground='orange', selectborderwidth=20)
3
4- canvas.create_oval(200, 100, 10, 20, fill='black')
5+ # create_text : 文字列を描く関数
6+ # create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
7+ # tag option : 描画する文字列へ名前をつける。testとする。
8+ canvas.create_text(250, 250, text="テストテスト", tag='test', fill='black')
9
10+ # testと名付けられたcanvasの2~4文字目を選択状態に変更する。
11+ canvas.select_from("test", 2)
12+ canvas.select_to("test", 4)

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

closeenough

closeenough optionを利用すると、canvasで描いた図形や画像へマウスオーバーできる範囲を拡大できます。

closeenoughの値としては、1以上の小数を設定します。

scrollbarに関連するoption

scrollbarに関連するoption(scrollregion, xscrollcommand, xscrollincrement, yscrollcommand, yscrollincrement)に関しては、Tkinterで使われるscrollbarとは?活用事例を交えて徹底解説の「その他のWidgetを使った、scrollbar Widgetサンプル集」でまとめていますので、是非ご確認ください。

まとめ

  • Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。
  • 図形や画像として、直線(折線)、楕円、扇形、矩形、多角形、画像、文字列、Widgetを描画できる。

参考文献