2

私はJavaScript/HTML5キャンバスを使用したアプリケーションに取り組んできました。これが、私がやっていることを示すためのコードを含むJSFiddleです:JSFiddle

フィドルでわかるように、2つのポイントを作成すると、カーソルがそれぞれ90°と180°にスナップし始めます。しかし、バグがあり、それを修正する方法がわかりません。最後に作成したポイントに近づきすぎて少しぐらつく場合を除いて、90°に完全にスナップします。また、180°のスナップは同じですが、90°よりもはるかに遠くにぐらつく点が異なります。どちらも同じコードを使用しているので、なぜそれらが異なる動作をするのかわかりません。また、どちらの方法でもそのぐらつきを取り除く方法がわかりません。問題があります。私のコードのいくつかを少し説明してみましょう。

混乱していると思う部分は、一番上にありcheckAnglesnapMouseToAngle機能します。

checkAngleは非常に簡単です。最後に作成された2つのポイントとマウスカーソルがあるポイントを取得し、それらの辺の長さを測定し、余弦定理を使用して現在の角度を測定します(また、私は数学者ではありません。これを行うためのより良い方法、それから私を啓発してください)。

snapMouseToAngleもう少し複雑です。まず、現在のマウスプレビューが水平か垂直かを確認します。次に、角度をチェックし、現在のプレビュー座標に8ピクセル(または私が呼んでいる1フィート)を追加してから、角度を再度チェックします。snap次に、マウスが内にあるかどうかをチェックする関数(ロジックの巨大なブロック)を通過しますangleSnapDistance。そうである場合は、スナップするはずの角度を現在の角度から差し引き、その値を。の中に入れますleftOverleftOver次に、差で除算され、マウスの位置から減算する数値が残ります。

だから私は何が間違っているのですか?何が原因でこのようにぐらつくのかはわかりませんが、修正方法を教えてくれた皆さんにはきっとお世話になります。ありがとう!

4

1 に答える 1

1

pxPerFoot = 1 に設定すると、ぐらつきがなくなります。pxPerFoot は本当に必要ですか? 観測されたマウス座標にジッターを追加します。しかし、いい仕事です!

于 2012-08-27T18:59:07.307 に答える