まつまるまつまる

どうも、まつまるです。前回はFlutterでお絵描きをしてみたので、今回はお絵描きした図形の角度を表示するアプリを作ります。

この記事ではお絵描きの部分を省きますので、図形作成方法について知りたければ前回の記事をご覧ください。

今回は上半身をイメージして肩とお尻を結んだ直線の角度を算出してみます。

図形の角度を算出する前提としては、黒丸のx,y座標を把握していることとします。

三角形を作れて3辺の長さを求めれる状態ですね。高校数学の知識を思い出しましょう。

僕は思い出せなかったのでググりました。今回は第二余弦定理を用いて角度を算出します。これを参考にしました。

あと、radianとdegreeの変換も必要になってくるので頭の片隅に入れておきましょう。
degree = radian * 180/π

それではやっていきましょう!!

スポンサーリンク

Dart (Flutter)で数式を扱う

Dartでは数式を使うときにmathパッケージが必要です。冒頭に追加しておきましょう。

math.(任意)で色々扱えるようになります。今回使う数式を例としてあげておきます。

今回はこれらを使っていきます。

3辺の長さを求めよう

まずは3(A,B,C)の座標を定義しておきます。

そんでもって三平方(a^2+b^2=c^2)の定理を用いて3辺の長さを出します。
ab^2(x5-x6)^2+ (y5-y6)^2となるので、ルートをとれば長さが求まります。Dartで記述すると・・

同様にACを結ぶ直線acとBCを結ぶ直線bcの長さを求めます。

スポンサーリンク

角度を算出しよう

今回はA点の角度を第二余弦定理を変形したものを使って求めていきます。

公式:

Dartで記述するとこうなります。

第二余弦定理ではcosθを求めていますが、欲しいのはθなのでアークコサインで求めます。。

あとはラジアンを度に変換します。
angleRad * 180 / math.pi
度を算出したらその数値を表示させるだけです。

角度の角度を求めよう。

ここでは、円弧を表示するために水平ラインからのずれ(角度)を求めます。これのお陰で角度を作っている線と線を結ぶ綺麗な円弧を表示できます。
とは言っても算出方法はcosθ=底辺/斜辺を使うだけです。

これでばっちしです。
あとはカスタムペイントで表示するのみです。コード全文をのせておくので参考にしてみてください。

スポンサーリンク

コード全文