3

タッチベースのホームページを作りたいです。したがって、たとえば、ユーザーが画像のように 5 本の指で画面に触れると (緑色の円、以下を参照)、ユーザーは特定のホームページにリダイレクトされますが、他のパターン (赤い円) で触れると、 「ログインに失敗しました。再試行してください」アラートを表示します。正方形内であればどこを触っても問題ありません。

主なアイデアは、ユーザーの指の位置を特定し、別のページにリダイレクトすることです。ログインのアイデアは単なる例です。

iOS のホームページにしたいので、HTML と JavaScript を使用してこれを行う方法はありますか?

レイアウト例

4

5 に答える 5

3

いいえ、パスワードで保護されたページの場合は、サーバー側の処理も必要になります。

HTMLページには、タッチイベントハンドラーからの座標で更新される（非表示の）フォームが含まれます。次に、一定の時間が経過した後、または条件（5つのコードが登録されているなど）が満たされたときに、フォームを送信します。後でこれをAJAXサービスに変換することもできますが、違いはありません。

次に、サーバーアプリケーションはタッチパターンを分析し、ログインCookieを使用して失敗メッセージまたは成功通知を送信する必要があります。

于 2012-05-01T11:09:27.540 に答える
2

ユーザーにタッチインさせたい要素のタッチイベントにバインドする必要があります。これらのイベントは、touchstart、touchmove、touchend（wellとtouchcancel）です。イベントでは、指の位置の座標が配列で示されます（実際には、3つです。どの配列またはどの配列にアクセスしてどのイベント/シナリオにアクセスするかについては、下部のリンクを参照してください）。次に、これらの座標を使用して形状を計算できます。

これは、jqueryを使用した2本の指の例です（必須ではありません）。

#JQuery
$('#myID').bind("touchstart", function(event) {
  var finger1PosX = event.originalEvent.targetTouches[0].pageX;
  var finger2PosX = event.originalEvent.targetTouches[1].pageX;
});

これは、少なくとも2本の指が押されていることを前提としています。これは悪い前提です。

ここに良いチュートリアル/ディスカッションがあります： http ：//www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

また、event.preventDefaultを使用して、このdivでのスクロールやその他のジェスチャを防止することもできます。

また、Androidでのマルチタッチイベントのサポートはバージョンによって異なることに注意してください（iOSについて質問していたことは知っています）。

于 2012-05-02T15:30:18.007 に答える
2

jGesturesは正しい方向に導きます。

于 2012-05-01T11:07:08.597 に答える
0

非表示のテーブルを作成することをお勧めします。これにより、エラー Torrance に対処する方法も提供されます。

http://www.html5rocks.com/en/mobile/touch/とタッチ対応アプリのセクションを見ると、マルチタッチ イベントの監視に役立つ場合があります。

多数のセルを持つグリッドを取得します。(セルの数が多いほど、パスワードを解読するのが難しくなりますが、ユーザーがログインするのが難しくなる傾向があります!)

次に、たとえば 10x10 のグリッドがある場合... (1 = ユーザーがタッチ)

0010000000
0101000000
0101000000
0000000000
0000000000
0000000000
0000000000
0000000000
0000000000
0000000000

次に、1 間の関係を調べて、一致するかどうかを確認できます。

于 2012-05-01T11:09:12.577 に答える
0

タッチの配列（あなたの場合は5つ）をそれぞれの座標で取得できます。そこから、必要なものを決定するのは「簡単」なはずです。ループ内で座標をボックスの座標と比較するだけです。ここでいくつかのチュートリアルを参照してください http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/またはGoogleで他の百を見つけてください

于 2012-05-01T11:06:28.997 に答える