3

我想创建一个基于触摸的主页。因此，例如，如果用户用 5 个手指触摸屏幕，如图所示（绿色圆圈，见下文），它会将用户重定向到特定主页，但如果他以其他模式（红色圆圈）触摸，它将显示“登录失败，重试”警报。用户触摸的位置无关紧要，只要它在正方形内即可。

主要思想是确定用户的手指位置并将他重定向到另一个页面，登录思想只是一个例子。

有没有办法使用 HTML 和 JavaScript 来做到这一点，因为我希望它成为 iOS 主页？

示例布局

4

5 回答 5

3

不，对于受密码保护的页面，您还需要服务器端处理。

您的 HTML 页面将包含一个（不可见的）表单，该表单将使用来自触摸事件处理程序的坐标进行更新。然后，在给定时间后或满足条件（例如：已注册 5 个坐标）后，您将提交表单。稍后您也可以将其转换为 AJAX 服务，但没有区别。

然后，服务器应用程序将需要分析触摸模式，并使用登录 cookie 发送失败消息或成功通知。

于 2012-05-01T11:09:27.540 回答
2

jGestures将带您走向正确的方向。

于 2012-05-01T11:07:08.597 回答
2

您需要为希望用户触摸的元素绑定触摸事件。这些事件是 touchstart、touchmove 和 touchend（以及 touchcancel）。在事件中，手指位置的坐标在一个数组中给出（实际上是三个 - 请参阅底部的链接，了解哪些数组或哪些数组要访问哪些事件/场景）。然后，您可以使用这些坐标来计算形状。

这是使用 jquery 的两个手指的示例（不是必需的）。

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

这假设至少有两个手指被按下，这是一个不好的假设。

这是一个很好的教程/讨论： 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 回答
0

您可以获取每个触摸的数组（在您的情况下为 5 个）及其坐标。从那里应该“容易”确定你想要什么，它只是在一个循环中将坐标与你的盒子坐标进行比较。在此处查看一些教程http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/或在谷歌上找到其他数百个

于 2012-05-01T11:06:28.997 回答
0

我建议创建一个隐藏表。这也将为您提供一种处理错误 Torrance 的方法。

如果您查看http://www.html5rocks.com/en/mobile/touch/和启用触控的应用程序部分，这可能有助于您监控多点触控事件

我会得到一个包含多个单元格的网格。（更多的单元格将 = 更难破解密码，但也更容易让用户难以登录！）

然后，如果您有一个 10x10 的网格，例如...（其中 1 = 用户触摸）

0010000000
0101000000
0101000000
0000000000
0000000000
0000000000
0000000000
0000000000
0000000000
0000000000

然后你可以计算出 1s 之间的关系，看看它是否匹配

于 2012-05-01T11:09:12.577 回答