JavaScriptでくるくるCAPCHA alt.ver
JavaScript でくるくる CAPTCHA を実装してみる - IT戦記の改造。
マウスドラッグにしたくなったのでそうした。でもiPhoneを含む一部UAでは操作できなくなってしまった。
回転の中心をOとする。 MouseDownの点をSとして、そこからCまでドラッグしたときの回転角は θc - θs 。 ここで、θcはベクトルOCがx軸となす角、θsはベクトルOSがx軸となす角。 まずθcから求める。 ベクトルOCの成分を(cdx, cdy)とすると、 矢印の先から矢印の根元を引いて、(cdx, cdy) = (cx - ox, cy - oy)。 そのとき、tan(θc) = cdy / cdx。 tanの逆関数はarctanなので、θc = arctan(cdy / cdx)。 JavaScriptだとMath.atan()というのがあるのだけれど、 値域が-π/2 ~ π/2 と、半周分しかない。理由は省略する。 なので、2引数のMath.atan2()を使う。いいからこっち使っとけ。 θc = Math.atan2(cdy, cdx) ←y成分が先! = Math.atan2(cy - oy, cx - ox) 同様に、θs = Math.atan2(sy - oy, sx - ox)
ちなみにコンピューター画面上では角度は時計回りが+の向きになる。数学の場合だと反時計回りが+なので逆なんだけど、y軸の向きが逆なんだから仕方がない。