クリックアンドドラッグの動きを特定の領域に制限する方法

やや一般的なタイトルをお詫び申し上げます。私がやろうとしていることを成し遂げる方法については、あまり手がかりがありません。そのため、可能な解決策を研究することさえ難しくなっています。

私はある種のパスマーカーを実装しようとしています（たぶんそれに最適な名前があるかもしれませんが、これは私が思いつくことができる最高のものです）。

プレーヤーの前にはパスマーカーがあり、ターンの計画が完了したらプレーヤーがどのように移動するかを決定します。プレーヤーはマーカーをクリックして選択した位置にドラッグできますが、マーカーは定義された作業領域（灰色のビット）内でのみ移動できます。

そのため、次の2つの問題に悩まされています。

まず、その実行可能な領域をどのように正確に定義する必要がありますか？プレーヤーが実行可能な角度を形成するための開始点となる2つのベクトルを想像できます。これらの2つの弧は、プレーヤーの位置に中心がある円から発生する可能性がありますが、すべてをどのように配置するかは明確にわかりません一緒。

次に、マーカーを配置できる領域を定義した後、その領域内にのみマーカーを配置するように強制するにはどうすればよいですか？たとえば、プレーヤーがマーカーをクリックしてドラッグすると、マーカーは作業領域内を自由に移動できますが、領域の境界を離れてはなりません。たとえば、プレーヤーがマーカーを上向きにドラッグし始めると、マーカーが作業領域の端（下の最初の図）に到達するまで上向きに移動しますが、その後、プレーヤーが横向きにドラッグを開始する場合、マーカーはドラッグ中にドラッグに追従する必要がありますエリア内（下の2番目の図）。

これがあまり混乱しないことを願っています。みんなありがとう。

編集：これが違いを生む場合、私はマーマレードSDKでC ++を使用しています。

次の3つの値を使用して、質問のような作業可能領域を定義できます。

float innerRadius;
float outerRadius;
float maxAngle;

これらの値は、プレーヤーの位置である場合とそうでない場合がある中心点に基づいています。作業可能領域の形状は、このポイントを配置する場所によって異なります。

上記の例では、中心位置はプレイヤーの後ろに一定の距離（たとえば50単位）あります。これは次のように簡単に計算できます。

float offset = -50;
Vector2 centerPosition = playerPosition + offset * playerForward;

マーカーの位置をその作業可能領域に制限するには、最初に通常どおりにマーカーを移動します。次に、中心点とマーカーの間の距離を検証します。

Vector2 direction = markerPosition - centerPosition;
float distance = direction.Length();
direction.Normalize();
markerPosition = centerPosition + direction * clamp(distance, innerRadius, outerRadius);

最後に、指定した範囲に対するマーカーの角度を検証します。これには疑似コードを使用します。

- Find angle between vector C->M and vector playerForward
- If abs(angle) <= maxAngle Then do nothing
- Else If angle > 0 Then rotate M around C by maxAngle-angle
- Else If angle < 0 Then rotate M around C by -maxAngle-angle

点を別の点を中心に回転させる方法を見てみましょう。これは、三角法または変換行列を使用して実行できます。

マーカーのサイズを考慮して、半径と角度を少し小さくして補正することもできます。

編集：考え直してみると、最初に角度を検証してから距離を検証すると、より自然に見える可能性があるため、両方の選択肢を試してください！

形状が不規則で、数学的に定義できない場合、どうしたら問題を解決できるか考えていました。警告：これは汚い解決策であり、気の弱い人には向いていません。

1.お住まいの地域：

2.モノクロのビットマップに変換します。

それにscale_0という名前を付けます

3.ビットマップのクローンを作成し、50％に縮小します。

それにscale_1という名前を付けます

4.以下同様に、幅/高さが4ピクセル未満のビットマップになるまで：

スケール：2、3、4、5、6

5.これで、さまざまな解像度の単色ビットマップとして領域ができました。

6.最後の画像（ここでは "scale_6"）を取得し、そのすべてのピクセルを反復処理します。

• 各ピクセルの座標を画面座標に変換しますx = Math.pow ( 2, scale_level );。scale_levelは、「scale_」の後に追加した数値です。実際にはクアッドツリーで作業しているわけではありませんが、クアッドツリーレベルと呼ぶこともできます。yについても同様です。
• 変換されたxとyのピクセルが黒かどうかを確認します。そうでない場合、それは形状の一部ではありません。continueループの次のステップに進んでください。
• ピクセルが以前にチェックされたピクセルよりもマウスカーソルに近いかどうかを確認します。そうであれば、ピクセルの座標を保存します。変換前の座標、つまりビットマップ内の座標を使用します。
• ループの最後で、これらの座標に2を掛けてx *= 2; y*=2;、次の画像（前のスケール）の座標に変換します。

7.前の画像（ここでは "scale_5"）を取得しますが、すべてのピクセルをループ処理しないでください。x = saved_xで始まり、x = saved_x + 2で終わります。yと同じです。つまり、今度はすべてのレベルで4ピクセルしかループしないからです。残りはpと同じです。6。

8.最初の画像（最大=最大解像度の画像）を取り、再び4ピクセルをループすると、最終的にマウスカーソルに最も近いピクセルが得られます。

9.ただし、ここでは「M」をポイントとして扱います。完全にフィットする円にしたい場合は、circle.radiusまずピクセルで形状を縮小（縮小）する必要があります。

このアルゴリズムは、単色ではなくグレースケールの画像を使用し、ピクセルが白でない場合は「フル」、完全に白の場合は「空」として扱う場合にのみ機能することを付け加えたいと思います...またはサイズ変更の場合アルゴリズムは、これらの4ピクセルの少なくとも1つが白でなかったときは常に、4ピクセルのすべてのグループを1つの黒ピクセルに変更します。