1

JavaScriptキャンバスに大量の線と点を描画しています。ユーザーがクリックすると、ポイントが追加され、次のポイントへの接続を含むプレビューが追加されます。

画像の例：

キャンバスで描く

この画像では、ユーザーが3回クリックして、3つの濃い緑色の点を作成しています。現在、ユーザーは最後にクリックしたポイントから28ピクセル離れたところにホバリングしており、薄緑色の接続、ポイント、および距離を示すブラックボックスを作成しています。

次に、薄緑色のポイントを28pxにスナップします。どうすればそれを行うことができますか？たとえば、10ピクセルのしきい値を設定し、そのしきい値内にある場合はスナップさせます。これを数学的に行う良い方法があることは知っていますが、それを理解するための知識がありません。

助けてくれてありがとう！

4

1 に答える 1

2

マウス移動中の距離を確認します（X_Currentは現在のマウス位置、X_0は最後のポイント位置です）。28と10の定数を距離としきい値に置き換えます。

Squared_Distance = (X_Current-X_0)*(X_Current-X_0) + (Y_Current-Y_0)*(Y_Current-Y_0)
if ((Squared_Distance >= (28 - 10)*(28 - 10)) &&  (Squared_Distance <= (28 + 10)*(28 + 10)))
  then snap it

28pxの距離での新しいポイントの位置：

Curr_Distance = Sqrt(Squared_Distance) // assert <> 0
Dir_X = (X_Current-X_0) / Curr_Distance
Dir_Y = (Y_Current-Y_0) / Curr_Distance
P28_X = X0 + 28 * Dir_X
P28_Y = Y0 + 28 * Dir_Y
于 2012-08-15T04:49:32.083 に答える