jqueryドラッグ可能なマウスポインターを修正しました

Question

HTML5で小さなゲームを構築しています。キャンバス要素は、ゲームの世界へのビューポートです。ユーザーは、小さなアイコンでマウスをクリックしてドラッグすることで、世界のビューポートの位置を移動できます。

問題は、マウスポインターが画面の端に当たったときにスクロールが停止することです。アイコンはページの角の1つにあるため、おそらく、方向の1つでのスクロールを厳しく制限します。

私が考えることができる唯一の技術的な解決策は、アイコン上のマウスポインターの位置を何らかの形で修正し、各フレームの相対的な動きを検出することです。基本的に、各ドラッグイベントの後、ポインター位置をアイコンの中央に戻すだけです。残念ながら、これが不可能であることはかなり前向きです。ユーザーのポインターで遊ぶことは、ユーザビリティとセキュリティの観点からは大きなノーではありません。

それで、私が欲しいことをする他の方法はありますか？私は主にここで技術的なアイデアを探していますが、より適切なインターフェイスの提案も大歓迎です。

Answer 1

3つの可能な解決策：

1. この「ジョイスティック」アイコンをコーナーから100ピクセルから移動します。ホバリングされるまで不透明度を与えます。クリックアンドドラッグの動きを「Sustain」にしてください。これにより、ジョイスティックセンターから40ピクセル離れたカーソルをクリックして保持すると、連続画面パンが発生します。

2. に似た矢印を使用します グーグルマップ. 。 （これを最初のソリューションと組み合わせることもできます。ハンドグラバーの部分を「ジョイスティック」部分に変更することもできます。）

3. まったく違うことをしてください。たとえば、カーソルが4つのエッジのいずれかに近づくと、スクリーンパンがあります。