コラム

CTC教育サービス・ホーム　＞　コラム　＞　ゼロから歩くPythonの道　＞　第26回　tkinterのcanvasをつかってみよう！

ゼロから歩くPythonの道

CTC 教育サービス

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

第26回　tkinterのcanvasをつかってみよう！ (菱沼佑香) 2021年11月

こんにちは、吉政創成　菱沼です。
今回も「いちばんやさしいPython入門教室（大澤文孝氏著）」を片手に勉強していきます。
ようやくヒット＆ブローを完成させましたので、今回から新しい章（Chapter7）に入っていきます。
この章では「クラス」と「オブジェクト」の概念を学ぶようで、そのためにtkinterのcanvasを使うようです。
今回は準備段階として、ただcanvasを使ってみました。

クラスとオブジェクトを理解するにはプログラミング経験を積む必要が...

クラスとオブジェクトはプログラミングの考え方や設計の問題が含まれているため、初学者にとって最初のうちにぴんとくるような理解するのはなかなか難しく、プログラミングの経験を積むと徐々にわかるようになってくるそうです。

この章ではそのクラスとオブジェクトを学ぶことになるのですが、具体的にどう学んでいくかというと、「円が動く」プログラムを作りながら考えていくようです。段階としては次の通り。

①ウィンドウを作り、クリックした場所に円を表示する
②ウィンドウ上で、自動的に動く円を作る
③動く円を増やし、複数の円がウィンドウ上で動くようにする
④円だけでなく、四角や三角のバージョンを作る

④の時点でクラスとオブジェクトという手法を使うことになるそうです。
今回は準備段階である①をまずは作っていくことになります。

キャンバスを作るよ！

さて、円を描くのに使うのはヒット＆ブローでもお世話になったtkinterのウィジェットの一つ、「Canvas（キャンバス）」です。
「Canvas」は線や円、楕円、多角形などを表示できる場所で、画像を表示することもできるそうです。

ちなみにtkinterが何をできるか、ざっくり振り返りたい方は以下の記事をご参照ください。
第19回　tkinterを使って画面を作る...前にmainloopの役割と使えるウィジェットを確認してみた

では早速ウィンドウと円を作ります。とはいっても基本的なことはヒット＆ブローで学んだものと同じです。こちらはサンプルコードがありましたので、実行結果と共に載せてみます。
サンプルコードでは、ウィンドウの作成、ウィンドウと同じサイズで背景色に白を指定したキャンバスを作成、作成したキャンバス上に、円を描くコードになっています。

fig01

背景色は別のものを指定できることはわかりますが、同一ウィンドウ上に違うサイズのキャンバスを作ることはできるのか？試しにやってみました。（ちなみに使用できる色については後程記載します。）

fig02

できました。

円を作ってみよう

さて、キャンバス上に円を描くところですが、次のように書かれています。
>>> canvas.create_oval(300 - 20, 200 - 20, 300 + 20, 200 + 20)

[oval]が円や楕円を描くメソッドだそうで、そのあとに続く数字（引数）の羅列についてテキストでは次のように書かれています。

引用-------
P.186
円を描くには、「create_oval」というメソッドを使います。このメソッドには、最低、4つの引数を指定します。（中略）4つ以上の引数を指定して、塗りや線の色などを指定することもできます。
最初の二つのペアが左上の座標、そして、次の2つのペアが右下の座標です。このメソッドを実行すると、その座標に収まるような楕円、もしくは円が描かれます。
（中略）
>>> canvas.create_oval(300 - 20, 200 - 20, 300 + 20, 200 + 20)
これによって「中心（300、200）、半径20」の円が描かれます。
-------------

図で見たほうがわかりやすいと思いますので、教科書に書かれている図を書いてみました。

fig03

左がサンプルコードで書いたもので、右がサンプルコードの数字の一か所を変更して楕円にしたものです。
円の中心にあたる部分がx＝300、y＝200で、その中心から左右上下のサイズを指定すると円や楕円にすることができます。
サンプルコードは円の中心から上下左右のサイズを20ずつにしているので円になりますが、右側は上下左を20にしたままで、右に伸びる部分を50にしたので楕円になりました。ついでにキャンバスの中心地からちょっとずれる感じで表示されています。

ところで、先ほど二つのキャンバスを作ったtest.pyでは円を描く部分を一旦削除しています。このままサンプルコード内にあった円を描く部分を戻すとキャンバスの外に配置される状態になりますので、キャンバス上じゃないよ！ということで、エラーになります。

円の塗りつぶしと線の色を変えてみよう！

先ほどの引用部分にも書かれていた通り、塗りつぶしや線の色も指定できるということなのでやってみます。

引用-------
P.187
create_ovalメソッドをはじめとするメソッドは、「黒い線」「塗りなし」で描きます。
もし色を付けたいときや線幅を変えたいときは、width、outline、fillの各オプションを指定します。なお、線を描きたくない時はwidthを0に、塗りたくないときはfillをNoneに指定します。
・width：線の幅
・outline：線の色
・fill：塗りの色

（中略）
ここでは、「線なし（widthを0）」「赤色（fillを"red"）」にして、赤い円にしてみましょう。
------------

ということで、やってみたのがこちらです。

fig04

ちゃんと線も塗りつぶしも指定できていますね。

tkinterで使える色について

tkinterで使用できる色は「rgb.txt ファイルの X カラーの名前か、または RGB 値を表す文字列」だそうで、rgb.txtのXカラーとはUnixのXウインドウシステムにあるそうです。
以下の参考リンクの2つ目に詳しく説明されていましたので詳細を知りたい方はご参照ください。色見本のページのリンクや使い方の注意点もまとめられています。

ちなみにテキストでも指定できる一覧の色の案内もされています。
https://www.tcl.tk/man/tcl8.4/TkCmd/colors.html
ただこちら、色見本がついてないので少しわかりづらいため、やっぱり参考リンクでご確認いただいた方がいいかなと思います。

参考：
tkinter --- Tcl/Tk の Python インターフェース｜チュートリアル
 Python：tkinterで指定できる色名について｜電脳産物
 /usr/lib/X11/rgb.txt（※色見本付きRGBコード一覧）

Cnavasで使える図形

今回は円を作成しましたが、Canvasでは線を引いたり、多角形を作成したりとできます。

引用-------
Cnavasに備わる描画のためのメソッド

メソッド	意味
create_arc(x1,y2,x2,y2,オプション)	弧を描く
create_bitmap(x,y,オプション)	ビットマップを描く
create_image(x,y,オプション)	画像を描く
create_line(x1,y1,x2,y2,オプション)	直線を描く
create_oval(x1,y1,x2,y2,オプション)	楕円または円を描く
create_polygon(x2,y1,x2,y2...,オプション)	多角形を描く
create_rectangle(x1,y1,x2,y2,オプション)	四角形を描く
create_text(x,y,オプション)	テキストを描く