针对多点触控浏览器进行的开发

转载 2012年03月27日 16:31:14

在本文中,我会深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。

前言

诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。随着移动网络的发展,其能够支持越来越复杂的应用,web开发者需要一种方法来处理这些事件。例如,几乎所有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸。

Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范

在本文中,我会深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。

触摸事件


三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

1. touchstart:手指放在一个DOM元素上。
2. touchmove:手指拖曳一个DOM元素。
3. touchend:手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表:

1. touches:当前位于屏幕上的所有手指的一个列表。
2. targetTouches:位于当前DOM元素上的手指的一个列表。
3. changedTouches:涉及当前事件的手指的一个列表。

例如,在一个touchend事件中,这就会是移开的手指。

这些列表由包含了触摸信息的对象组成:

1. identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。
2. target:DOM元素,是动作所针对的目标。
3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。

可触控应用


touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势,比如说捏缩放、旋转等待。

下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}
}, false);

下面是一个示例,该例子显示了屏幕上当前所有的触点,它的作用就是用来感受一下设备的响应性。


// 设置画布并通过ctx变量来暴露上下文
canvas.addEventListener('touchmove', function(event) {
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
ctx.beginPath();
ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();
}
}, false);

演示

到处都有着许多有意思的多点触摸演示,比如说这个由Paul Irish和其他人实现的基于画布的绘画演示


还有Browser Ninja,一个技术演示是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。

最佳做法


阻止缩放

缺省的多点触摸设置不是特别的好用,因为你的滑动和手势往往与浏览器的行为有关联,比如说滚动和缩放。

要禁用缩放功能的话,使用下面的元标记设置你的视图区(viewport),这样其对于用户来说就是不可伸缩的了:

content="width=device-width, initial-scale=1.0, user-scalable=no">

看看这篇关于移动HTML 5的文章,了解更多关于视图区设置的信息。

阻止滚动

一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。

document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false); 

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话,要小心地考虑如何响应触摸事件,因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子,你可以在有触摸输入的时候就立刻进行绘制:

canvas.addEventListener('touchmove', function(event) {
renderTouches(event.touches);
},

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充,替代做法是,可以跟踪所有的手指,然后在一个循环中做渲染,这样可获得更好的性能:

var touches = []
canvas.addEventListener('touchmove', function(event) {
touches = event.touches;
}, false);

// 设置一个每秒60帧的定时器
timer = setInterval(function() {
renderTouches(touches);
}, 15);

提示:setInterval不太适合于动画,因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数,基于性能和电池工作时间原因,这是一个更好的选择。一但浏览器提供了对该函数的支持,那将是首选的处理事情的方式。

使用targetTouches和changedTouches

要记住的一点是,event.touches是与屏幕接触的所有手指的一个数组,而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

最后一点,因为你是在为移动设备做开发,因此你应该要留心移动的最佳做法,这些在Eric Bidelman的文章中有论及,以及要了解这一W3C文档

设备支持


遗憾的是,触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息,其中包括哪些事件是支持的,以及touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3,在Xoom上测试了Android 3.0.1,以及在iPad和iPhone上测试了iOS 4.2。

简而言之,所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:

1. touchenter:移动的手指进入一个DOM元素。
2. toucheleave:移动手指离开一个DOM元素。
3. touchcancel:触摸被中断(实现规范)。

被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过,被测试的浏览器没有支持 radiusX、radiusY或是rotationAngle属性,这些属性指明触摸屏幕的手指的形状。在一次touchmove期间,事件大约一秒钟触发60次,所有的被测试设备都是这样。

Android 2.3.3 (Nexus)

Android的Gingerbread浏览器(在Nexus One和Nexus S上测试)不支持多点触摸,这是一个已知的问题

Android 3.0.1 (Xoom)

Xoom的浏览器对多点触摸有一个基本的支持,不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸,换句话说,下面的代码会对两个同时发生的触摸的给出反应:

obj1.addEventListener('touchmove', function(event) {
for (var i = 0; i < event.targetTouches; i++) {
var touch = event.targetTouches[i];
console.log('touched ' + touch.identifier);
}
}, false);

但下面的代码则不会:

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
console.log('touched ' + event.targetTouches[0].identifier);
}
}, false);
}

iOS 4.x (iPad, iPhone)

iOS设备完全支持多点触摸,能够跟踪多个手指,并在浏览器中提供一个非常敏感的触摸体验。

开发者工具


在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入。

不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上。然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具。

这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸,触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话,比如说现代的App MacBook,那么多点触摸也可以被模拟。

单点触摸事件

如果你想在桌面上模拟单点触摸事件的话,试一下Phantom Limb,该程序在网页上模拟触摸事件并提供一只巨手来引导。

另外还有Touchable这一jQuery插件,该插件跨平台地统一了触摸和鼠标事件。

多点触摸事件

为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板(比如说Apple MacBook或是MagicPad)上起作用,我创建了这一个MagicTouch.js填充工具,其捕捉来自触控板的触摸事件,然后把它们转换成标准兼容的触摸事件。

1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。

2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。

3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。

4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中:

< head>
...
< script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
< /head>

< body>
...
< object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
Touch input plugin failed to load!
< /object>
< /body>

我只在Chrome 10上测试了这一方法,不过只要稍做调整它应该能够在其他的现代浏览器上工作。

如果你的计算机没有多点触摸输入的话,你可以使用其他的TUIO跟踪器,比如说reacTIVision来模拟触摸事件。欲了解更多信息,请参阅TUIO项目页面

需要注意的一点是,你的手势可以是和OS层面的多点触摸手势相同的。在OS X上,你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。

随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持,我非常高兴地看到新的web应用充分利用了这一丰富的API。

浏览器开发工具的25个秘密

开发过去几年来,浏览器开发工具一直是Web开发者最得力的工具。它能够与Web浏览器和谐相处,允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript,以及获取一些其他的有用信息。以前...
  • u011225629
  • u011225629
  • 2016年01月12日 17:38
  • 3032

【简易的APP开发】开发简易安卓浏览器(一)

开发一个简易的手机浏览器并不难,当然做一个功能强大的浏览器就相当不容易了,这里本人做的是简易版,供大家学习交流 1.首先第一步,配置权限:关于网络访问的权限。                ...
  • u011669081
  • u011669081
  • 2015年07月23日 13:37
  • 5326

iOS开发实现一个简易浏览器

iOS中可以使用几个简单的控件实现一个建议版本的浏览器,输入网站的url,就可以进行上网。作为一个iOS开发的入门。具体步骤如下: (1)在Main.stroyboard中拖入几个控件,Text Fi...
  • CHENYUFENG1991
  • CHENYUFENG1991
  • 2015年07月28日 15:00
  • 3711

基于.net开发chrome核心浏览器【三】

本篇我们讲解怎么用CefGlue开发一个最简单的浏览器 一: CefGlue是建立在Cef项目之上的, Cef项目是C/C++的项目; CefGlue只不过是通过PInvoke来访问Cef项目生成...
  • zaocha321
  • zaocha321
  • 2016年09月19日 15:10
  • 1713

Qt开发之webkit(编写网页浏览器)

QtWebKit提供了一个Web浏览器引擎,可以很方便的把万维网中的内容嵌套到Qt应用程序中.比如HTML,CSS,JS等到这里Qt基础基本过了一遍,接下来就准备开发几个小项目来实践一下.新建Qt  ...
  • qq_21792169
  • qq_21792169
  • 2016年12月14日 23:46
  • 2699

Android网页浏览器开发详解(一)

Android 网页浏览器开发器开发详解(一),主要通过WebView类实现载入网页,刷新网页,向前载入历史网页,向后载入历史网页和缩放网页等五个功能。...
  • kangweijian
  • kangweijian
  • 2015年02月20日 11:29
  • 2313

webkit浏览器开发之路(一)——环境搭建

最近在着手开发浏览器,于是便用到了非常受欢迎的webkit,
  • coffeeRoy
  • coffeeRoy
  • 2014年06月06日 09:57
  • 2631

Web前端开发必备--浏览器知识科普

做前端开发的程序员一定要熟悉各种浏览器的内核,以了解各种浏览器的兼容性,浏览器自带的特性,这样才能做出更好的兼容性设计以及代码撰写。        浏览器的种类,如果按照生产商的品牌分,不说数以万计,...
  • u010297791
  • u010297791
  • 2016年12月02日 14:28
  • 2093

Web开发人员必须要知道的浏览器知识

内核的作用 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JAVAScript...
  • zenson_g
  • zenson_g
  • 2013年01月03日 23:17
  • 727

使用JS开发IE、360浏览器、chrome浏览器插件

互联网资料整理
  • u012670530
  • u012670530
  • 2014年09月09日 10:56
  • 2738
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:针对多点触控浏览器进行的开发
举报原因:
原因补充:

(最多只允许输入30个字)