まつまる どうも、まつまるです。前回はFlutterでお絵描きをしてみたので、今回はお絵描きした図形の角度を表示するアプリを作ります。
この記事ではお絵描きの部分を省きますので、図形作成方法について知りたければ前回の記事をご覧ください。
今回はできるだけシンプルな図形を作成してみました。 図形を作成するコードをどこに作ればいいのか分からない人は下を参考にしてください。 お絵描きするならpaint以下に追記していきます。 canvas.drawCircle …
今回は上半身をイメージして肩とお尻を結んだ直線の角度を算出してみます。
図形の角度を算出する前提としては、黒丸の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で記述すると・・
同様にAとCを結ぶ直線acとBとCを結ぶ直線bcの長さを求めます。
角度を算出しよう
今回はA点の角度を第二余弦定理を変形したものを使って求めていきます。
公式：
Dartで記述するとこうなります。
第二余弦定理ではcosθを求めていますが、欲しいのはθなのでアークコサインで求めます。。
あとはラジアンを度に変換します。
angleRad * 180 / math.pi
度を算出したらその数値を表示させるだけです。
角度の角度を求めよう。
ここでは、円弧を表示するために水平ラインからのずれ（角度）を求めます。これのお陰で角度を作っている線と線を結ぶ綺麗な円弧を表示できます。
とは言っても算出方法はcosθ=底辺/斜辺を使うだけです。
これでばっちしです。
あとはカスタムペイントで表示するのみです。コード全文をのせておくので参考にしてみてください。
