【Python】ルーレットアプリ開発 Part3
こんにちは、にわこまです。
今回は、ルーレットを回転させる関数を作成します。扇の図形を何度かずつ移動させていき、回転を表現します。実際に動かすことができるため、完成図をより具体的にイメージすることができます。
誤字脱字など何かございましたらご連絡お願いいたします。
ルーレットアプリ開発の目次はこちら
スポンサードサーチ
回転させる関数の作成
ウィンドウ中央に作成した扇の図形をウィンドウの中心を回転の中心として回転させる関数を作成します。10°ずつ右に回転するように関数を作成します。
コードの提示
ルーレットを回転させる関数のソースコードを以下に示します。
import tkinter as tk
class RouletteApp():
def __init__(self):
# 省略
def set_butttons(self):
# 省略
def set_circle(self):
# 省略
def rotate_fans(self):
for fan_tag in self.fan_tags:
start_angle = self.canvas.itemcget(fan_tag, "start")
start_angle = str(float(start_angle) - 10)
self.canvas.itemconfig(fan_tag, start=start_angle)
def clk_start(self):
print("Pressed Start Button.")
self.rotate_fans()
def clk_stop(self):
print("Pressed Stop Button.")
if __name__ == '__main__':
rouletteapp = RouletteApp()
rouletteapp.root.mainloop()
上記のコードは以下からダウンロードできます。
コードの解説
15行目から19行目の「rotate_fans関数」は、扇の図形を10°右に回転させる関数です。
16行目の「for文」は、扇の図形のタグの数だけ繰り返すように設定しています。
17行目の「start_angle」は、扇の図形の扇開始角度が代入されています。具体的には、同一タグのオブジェクトからstart変数の値を取得しています。
18行目の「start_angle」は、10°右に回転させた扇開始角度が代入されています。start_angleは文字列であるため、一度浮動小数点型に変更してから計算し、また文字列に変更しています。
19行目の「itemconfig関数」は、変更した扇の図形の扇開始角度を設定しています。第1引数にタグ、第2引数に設定したい値を代入します。
23行目の「self.rotate_fans()」は、扇を回転させる関数を実行しています。Startボタンをクリックしたら回転が始まるようにしたいため、click_start関数内で実行しています。
動作確認
コードを保存したら、コマンドプロンプトを開きファイルを保存したフォルダまで移動します。移動したら、以下のコマンドを入力し実行します。
python rouletteapp.py
Startボタンをクリックすると円が回転します。回転したことを確認できたら動作確認完了です。
スポンサードサーチ
逆三角形の作成
ルーレットが回るようになりましたが、止まったときにどこの扇を指しているのか分かりません。そのため、ルーレットの上部に正逆三角形を作成します。以下の画像の赤枠の事です。
コードの提示
逆三角形を作成するソースコードを以下に示します。
import tkinter as tk
import numpy as np
class RouletteApp():
def __init__(self):
# window size
self.win_w = 800
self.win_h = 800
self.win_size = "{}x{}".format(self.win_w, self.win_h)
# root
self.root = tk.Tk()
self.root.title("RouletteApp Part3")
self.root.geometry(self.win_size)
self.root.resizable(0, 0)
# Canvas
self.canvas = tk.Canvas(self.root,
width=self.win_w,
height=self.win_h,
background="#FFFFFF")
self.canvas.place(x=0, y=0)
# set buttons
self.set_butttons()
# set circle
self.set_circle()
self.fan_tags = ["fan01", "fan02", "fan03", "fan04", "fan05", "fan06"]
# set triangle
self.set_triangle()
def set_butttons(self):
# 省略
def set_circle(self):
# 省略
def set_triangle(self):
tri_edge_half = round((30 * np.cos(np.radians(30))), 1)
tri_edge = tri_edge_half * 2
tri_edge_height = round(tri_edge * np.cos(np.radians(30)), 1)
(tri_btm_x, tri_btm_y) = (self.win_w / 2, self.win_h / 2 - self.circle_r - 10)
(tri_lt_x, tri_lt_y) = (tri_btm_x - tri_edge_half, tri_btm_y - tri_edge_height)
(tri_rt_x, tri_rt_y) = (tri_btm_x + tri_edge_half, tri_btm_y - tri_edge_height)
self.canvas.create_polygon(tri_btm_x, tri_btm_y,
tri_lt_x, tri_lt_y,
tri_rt_x, tri_rt_y,
tri_btm_x, tri_btm_y,
outline="",
joinstyle=tk.MITER,
fill="#000000")
def rotate_fans(self):
# 省略
def clk_start(self):
print("Pressed Start Button.")
self.rotate_fans()
def clk_stop(self):
print("Pressed Stop Button.")
if __name__ == '__main__':
rouletteapp = RouletteApp()
rouletteapp.root.mainloop()
上記のコードは以下からダウンロードできます。
コードの解説
2行目の「import文」は、numpyライブラリをnpとしてインポートしています。逆三角形を作成する際に三角関数を使用するためにインポートしています。
29行目の「self.set_triangle()」は、後述する逆三角形を作成する関数を実行しています。
37行目から50行目の「set_triangle関数」は、逆三角形を作成する関数です。
38行目の「tri_edge_half」は、逆三角形の1/2辺の長さが代入されています。
具体的な計算方法について説明します。まず、頂点から中心の長さを30としました。そして「30 × cos(30)」を計算することで1/2辺が求まります。イメージ図を以下に示します。
39行目の「tri_edge」は、逆三角形の1辺の長さが代入されています。先に求めた「tri_edge_half」に2をかけてあげることで1辺の長さを求めています。
40行目の「tri_edge_height 」は、逆三角形の高さが代入されています。tri_edge × cos(30)を計算することで高さを求めています。イメージ図を以下に示します。
41行目の「tri_btm_x」と「tri_btm_y」は、それぞれ逆三角形の下のx座標とy座標が代入されています。x座標は、ウィンドウの1/2にしています。y座標は円から10だけ離れるようにしています。具体的な頂点を以下に示します。
42行目の「tri_lt_x」と「tri_lt_y」は、それぞれ逆三角形の左上のx座標とy座標が代入されています。x座標は、tri_btm_x座標から1/2辺の長さだけ引いた値にしています。y座標はtri_btm_yからtri_edge_heightだけ引いた値にしています。具体的な頂点を以下に示します。
43行目の「tri_rt_x」と「tri_rt_y」は、それぞれ逆三角形の右上のx座標とy座標が代入されています。x座標は、tri_btm_x座標から1/2辺の長さだけ足した値にしています。y座標はtri_btm_yからtri_edge_heightだけ足した値にしています。具体的な頂点を以下に示します。
44行目から50行目の「create_polygon関数」は、逆三角形を作成しています。
44行目から47行目は逆三角形の各頂点を指定しています。create_polygon関数は頂点を順番に指定することで図形を作成する関数です。ゆえに、下の頂点→左上の頂点→右上の頂点→下の頂点の順で指定することで逆三角形を作成しています。
48行目の「outline=””」は、線の色を設定しています。空の文字列にすることで、設定しないという設定にしています。
49行目の「joinstyle=tk.MITER」は、逆三角形の角の形を設定しています。tk.MITERは角を鋭くしています。詳しくは以下のサイトを参考にしてください。
参考サイト：5.1.2 Cap and join styles
50行目の「fill=”#000000″」は、逆三角形の色を設定しています。#000000は黒色です。
動作確認
コードを保存したら、コマンドプロンプトを開きファイルを保存したフォルダまで移動します。移動したら、以下のコマンドを入力し実行します。
python rouletteapp.py
以下のように逆三角形が表示されたら動作確認完了です。
スポンサードサーチ
まとめ
今回は、ルーレットを回転させる関数と上部の逆三角形を作成する関数を作成しました。ルーレットを回転させることができたため、完成へのイメージが明確になったかと思います。
次回Part4では、逆三角形の上部にテキストを表示させます。また、ルーレットが止まった際に結果を表示させる関数を作成します。
ルーレットアプリ開発の目次はこちら
最後までお読みいただきありがとうございます。
スポンサードサーチ
