【Python】Tkinter 第4回 canvasで図形を描画する

Tkinterを使ってGUIの画面上に図形を描画してみます。
今回から、「キャンバス」を使います。

サンプルプログラム

以下のプログラムを実行してください。

import tkinter

class MyApp1(tkinter.Frame):
    def __init__(self, master=None):
        super().__init__(master)
        self.pack()

         #キャンバスを作成
        self.canvas = tkinter.Canvas(root, bg="white", height=300, width=300)
        
        # 図形を描く
        self.canvas.create_rectangle(10, 20, 100, 50, fill = 'red')#塗りつぶし
        self.canvas.create_polygon(250, 10, 220, 100, 150, 100,fill="green")
        self.canvas.create_line(10, 200, 150, 150, fill='red')
        self.canvas.create_oval(100, 100, 150, 150)

        # キャンパスを描画
        #self.canvas.place(x=0, y=0)
        self.canvas.pack()
        

root = tkinter.Tk()
root.geometry("400x300") #Windowのサイズ設定
root.title("Let's Use a Canvvas") #タイトル作成
app = MyApp1(master=root)
app.mainloop()

実行結果

このような画面になったでしょうか？

　

解説

Tkinterでは、画面上に直接図形を書くことはできません。
代わりに、画面上に「キャンバス（Canvas）」を作成し、その上に図形を描きます。

ということで、図形を書くために必要な手順は、
STEP1. キャンパスの作成
STEP2. キャンパスに図形を描く
STEP3. キャンパスを描画
という3ステップです。

STEP1. キャンバスの作成

上のプログラムではこの部分でキャンバスを作成しています。

self.canvas = tkinter.Canvas(root, bg="white", height=300, width=300)

一応、それぞれの引数の説明をすると、このようになります。

例	説明
bg="black"	背景色
height = 20	ボタンの高さ
width = 20	ボタンの横幅

　
STEP2では、このキャンバス上に図形を描いていきます。

STEP2. キャンバスに図形を描く

キャンバスには、図形、文字、画像など、様々なものを表示することができます。

この記事では、図形の描画に絞ってキャンパスの使い方を紹介します。

キャンパスに書ける図形は、以下の通りです。
・四角形
・円
・円弧
・直線
・多角形

順番に解説していきます。

四角形（矩形）を描く

四角形を描くにはcanvas.create_rectangle()関数を使用します。

canvas.create_rectangle(10, 20, 100, 50, fill = 'red')#塗りつぶし

canvas.create_rectangle()関数の引数は、（四角形の左上ｘ座標、四角形の左上ｙ座標、幅、高さ）
です。

中身を塗りつぶしたい等の設定は、この記事のSTEP2の一番下をご覧ください。
　

円（楕円）を描く

円や楕円を描くにはcanvas.create_oval()関数を使用します。

canvas.create_oval(100, 100, 150, 150)

canvas.create_oval()関数の引数は、（円の左上ｘ座標、円の左上ｙ座標、円の右下のｘ座標、円の右下のｙ座標）
です。

※ここでいう左上、右下の点というのは、描きたい円（楕円）に外接する長方形（矩形）の左上、右下の座標のことです。

中身を塗りつぶしたい等の設定は、この記事のSTEP2の一番下をご覧ください。

多角形を書く

多角形を描くにはcanvas.create_line()関数を使用します。

canvas.create_polygon(250, 10, 220, 100, 150, 100,fill="green")

canvas.create_line()関数の引数は、（1つ目の頂点ｘ座標、1つ目の頂点ｙ座標、2つ目の頂点ｘ座標、2つ目の頂点ｙ座標、....）
というふうに書きます。
最低頂点は3つ必要です。

Tkinterには三角形を描く関数がないので、三角形を書く時にはcanvas.create_line()関数を使います。

直線を描く

直線を描くにはcanvas.create_line()関数を使用します。

canvas.create_line(10, 200, 150, 150, fill='red')

canvas.create_line()関数の引数は、（線の一方の端のｘ座標、線の一方の端のｙ座標、反対の端のｘ座標、反対の端のｙ座標）
です。

その他の設定

その他にも、枠の色や線の幅等を指定できます。

例	説明
fill = ”red"	内部を塗りつぶす色
stipple = ビットマップ	内部を塗りつぶすときの模様になるビットマップ
outline = 色	枠の色
width = 3	枠の幅（デフォルトは 1）

STEP3. キャンパスを描画

以下のコードを実行すると、キャンバスが描画されます。

canvas.pack()

また、キャンバスのWindow上の位置を決定したい時には、以下の関数を使います。

canvas.place(x=0, y=0)