コラム

CTC教育サービス・ホーム　＞　コラム　＞　ゼロから歩くPythonの道　＞　第29回　tkinterのcanvasで作った円を左右・斜めに往復させてみよう

ゼロから歩くPythonの道

CTC 教育サービス

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

第29回　tkinterのcanvasで作った円を左右・斜めに往復させてみよう (菱沼佑香) 2022年2月

こんにちは、吉政創成　菱沼です。

今回も「いちばんやさしいPython入門教室（大澤文孝氏著）」を片手に勉強していきます。

「クラス」と「オブジェクト」の概念を学ぶということで、その準備段階として、前回はcanvas上に作った円を、タイマーを使って動かすという処理を作りました。

今回は引き続きその準備段階として、Canvas上に作った円を左右に往復させるという処理を作ってみます。

キャンバスに作った円を左から右、右から左に動かしてみよう

前回作成した円はCanvasを左から右に移動して、フェードアウトしたらそれで終了というものでしたが、今回は左から右に行ったら左に戻っていくという処理を作ります。

------

引用P.199

円のX座標とキャンバスの左端・右端のX座標を判定して、もし超えたら反転するように設定すればいいだけです。

反転するところの判定は、左端（＝X座標が0）と右端（＝X座標がキャンバスの幅）の2点で行います。移動していくのは円なので、判定する座標には半径も含めた方が勿論いいのですが、ここでは話を簡単にするために、円の「中心点」で判定することにします。つまり、円自体は、半径の分だけはみ出てから反転します。

------

ということでまずはサンプルコードから確認します。

前回のコードも並べて、違う部分にマークしてみました。

fig01

今回、新たに追加されたのは変数dxと、X座標の位置によって判定するif文です。

右に移動する場合、円のX座標は＋1されていきますが、左に移動する場合はX座標が-1されていく必要があります。

そのため、前回のようにただ左に移動するだけならx+1でよかったのですが、今回は+1も-1もある状態なので変数を設置して、if文で判定するという方法がとられています。

実行してみた結果を張り付けるのは難しいですね

ウィジェットの状態を取得する変数で、メンテナンスや変更を楽にしよう

ところで、if文では、キャンバスの幅の値を取得するのに「winfo_width」が使用されています。キャンバスのサイズがわかっているのに、なぜこれを使用するかについてはテキストに次のように書かれています。

------

引用P.201

このプログラムでは、キャンバス幅が600なので、winfo_widthというメソッドを使わず、「x>=600」と記述しても同じです。しかしメソッドを使って取得しておけば、あとでキャンバスの沖差を変更することになったときでも、ifの部分の修正が必要ありません。そうした理由から、固定値を書くのではなくて、この例のように、メソッドを使って実際の値を取得するようにプログラムした方が望ましいです。

------

ということで、似たようなメソッドがあるなら知っておいた方がいいかなと思い調べてみました。

ウィジェットの状態を調べるメソッドには次のものがあるようです。

widget.winfo_width()	ウィジェットの幅（X座標）
widget.winfo_height()	ウィジェットの高さ（Y座標）
widget.winfo_x()	親ウィンドウ内での x 座標
widget.winfo_y()	親ウィンドウ内での y 座標
widget.winfo_rootx()	ディスプレイ上での x 座標
widget.winfo_rooty()	ディスプレイ上での y 座標
widget.winfo_exists()	ウィジェットが存在するか

参考：お気楽 Python/Tkinter 入門

参考：tkinter トップレベルウィンドウ・ウィジェット共通メソッド

円を斜めに動かすよ！

X座標とY座標を同時に動かす設定にすることで、斜めにも円を動かすことができるようです。

------

引用P.203

dxという変数でXの移動量を保持して左右に移動させました。同様に、Y座標方向、つまり上下に動かすには、Yの移動量としてdyという変数を導入し、この変数dyを円のY座標に加えていくという処理をします。このY座標の処理を全Lessonで使用したプログラムに加えると、X座標方向（左右）とY座標方向（上下）が同時に動くので、結果として斜め（45度）に動くようになります。

このときもちろん、円がキャンバスの高さを超えたときの処理も記述します。つまり、上辺（＝Y座標が0）と下辺（＝Y座標がキャンバスの高さ）の2点判定し、移動を反転します。

------

ということで、先ほど確認したウィジェットの状態を確認するメソッドの中にY座標を出す「widget.winfo_height()」がありましたが、それを今度は使用していきます。

次の画像がそのサンプルコードで、先ほどの左右に往復しているものから追記された場所を緑枠で囲っています。

fig02