とある科学の備忘録

とある科学の備忘録

CやPythonのプログラミング、Arduino等を使った電子工作をメインに書いています。また、木製CNCやドローンの自作製作記も更新中です。たまに機械学習とかもやってます。

【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()

 

実行結果

このような画面になったでしょうか?
f:id:pythonjacascript:20181231091820j:plain
 

解説

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()関数の引数は、(四角形の左上x座標、四角形の左上y座標、幅、高さ)
です。

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

円(楕円)を描く

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

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

canvas.create_oval()関数の引数は、(円の左上x座標、円の左上y座標、円の右下のx座標、円の右下のy座標)
です。

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

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

多角形を書く

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

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

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

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



直線を描く

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

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

canvas.create_line()関数の引数は、(線の一方の端のx座標、線の一方の端のy座標、反対の端のx座標、反対の端のy座標)
です。


その他の設定

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

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


STEP3. キャンパスを描画

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

canvas.pack()

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

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