在英特尔架构 Android* 设备上使用 HTML5 游戏中的触控屏

作者：Tao Wang (Intel)

随着智能手机和平板电脑的迅速普及，在这些触控设备上提供自然体验的方式也发生了巨大变化。 原生应用开发人员已经整合了触控事件来提升用户体验并改变用户与内容交互的方式。 智能手机和平板电脑等移动设备通常采用敏感的电容式触控屏采集用户手指操作。 随着移动网络开始支持更加先进的应用，web 开发人员需要处理这些事件的解决方案。 例如，几乎任何快速游戏都需要同时按下多个按钮的操作，从触控屏的角度来说就是多触控操作。

使用 HTML5 中的画布元素

本文将详细介绍基于设备 Android* 设备、使用 HTML5 的触控事件 API。 另外，我们还将探讨开发哪些应用，并介绍开发触控应用的技巧与策略。 直到最近移动应用才能使用 HTML5 跨平台技术处理触控事件。 这是让移动应用变得更加原生自然的全新方法。 由于我们能够整合触控事件处理和 HTML5 的新画布组件，我们能够采集用户的活动并支持用户利用画布组件。 HTML5 对<画布>组件的定义是：独立于分辨率的位图画布，可用来渲染图形、游戏图形或其它动态视觉图片。 根据 web 定义，画布包含以 HTML 代码定义的可画区域并且带有高和宽属性。 JavaScript* 代码可通过丰富的会话功能集访问这一区域。

使用 HTML5 触控事件，应用可为用户提供与原生应用同样出色的体验。 通过提供触控和各种手势控制，开发人员可帮助用户迅速穿越应用或构建精彩的交互式游戏。

开发人员指南

让我们深入探讨如何使用 HTML5 画布组件采集用户触控事件。

正如万维网联盟(W3C)指出：“本规范定义了第五个主要版本，首次改动了万维网的核心语言： 超文本标记语言(HTML)。”

有四类触控事件：

• touchstart
• touchmove
• touchend
• touchcancel

下面分别详细介绍。

touchstart

当用户在触控表面放置一个触控焦点就会激活该事件；该事件的焦点必须是一个组件。

touchmove

当用户在触控表面上移动一个触控点时就会激活该事件。

该事件的焦点必须是当触控焦点放在表面时创建 touchstart 事件的同一元素，无论该触控焦点是否曾经移至目标组件的智能范围之外。

请注意：发送 touchmove 事件的速度取决于应用执行速度，而应用执行速度又取决于硬件。

touchend

当用户在触控表面上删除一个触控点时就会激活该事件。另外，当触控点离开触控表面时也会激活该事件，例如，从屏幕上拖开。

该事件的焦点必须是当触控焦点放在表面时创建 touchstart 事件的同一元素，无论该触控焦点是否曾经移至目标组件的智能范围之外。

touchcancel

当在特定实施过程中触控焦点被干扰时就会激活该事件。 例如，同步事件或活动在 UI 上开始，取消触控，或触控焦点离开存档窗口进入可处理用户交互的非报告区域。 当客户端在触控表面放置的触控焦点多于设备或执行的设计存储数量时，我们可能分配这一事件类型。 在这种情况下，触控列表中之前存储的触控对象应清空。

为了采集触控事件并在画布组件上解释，我们首先应了解画布组件的使用方法。 当使用画布进行标准 HTML 输入时必须注意两个方面。

• 文本信息字段提高移动设备上的控制台(键区)，覆盖屏幕的 50%。 为了避免这种情况，我们需要确保控制台不要覆盖画布太多，或者选择其它输入类型。
• 默认设置下，移动设备上的按钮有可能很小。 为了便于手指操控按钮，使用<元>标签将视口设置小一些，或者引导比例设置大一些，或者将按钮字体设置得大于 CSS 字体。

让我们看一下显式画布 API。 首先，我们从画布 API 介绍以下方法:

• Context getContext(String contextId);
• addEventListener()

getcontext() 方法可获取渲染上下文及其绘画功能。addeventlistener() 可在所调用的 EventTarget 上注册指定的收听者。 事件目标可能是存档中的元素，文档本身、窗口、或者增强事件的任何项目。

句法

    
    

     
     

      
      

       
       
1
target.addEvenListener(type,listener,Boolean)
      
      
     
     
    
    

类型

串代表收听的事件类型(touchstart, touchmove, touchend, touchcancel)。

收听者

当特定类型的事件发生时接收告警。 这必须是在 eventlistener 界面中执行的对象，或者 JavaScript 函数。

boolean

如果值为真，则表示用户希望开始采集触控事件。 采集开始以后，所有指定的事件在分配至 DOM 树下的事件的任何 EventTarget 之前必须分配至列表指定的收听者。

我们来一些代码：

    
    

     
     

      
      

       
       
1
<canvas id= ”touch” width=”150” height=”150”> 
      
      
     
     
    
    

对不起，您的浏览器不支持 HTML5 元素画布。

    
    

     
     

      
      

       
       
1
</canvas>
      
      
     
     
    
    

这与<img>组件十分相似；主要差别是它不具备<src>和<alt>质量。 <画布>组件仅有两个方面：宽和高。 如果出现渲染错误，请尝试在画布特性中指明宽高属性，而不要使用 CSS。 宽高分别默认为 300 和 150。 调整 id 以便使用 JavaScript 初始化画布，其内容需要在浏览器不支持时使用。

    
    

     
     

      
      

       
       
1
var cans= document.getElementById(“touch); 
      
      
      
      

       
       
2
var canctx = canvas.getContect(‘2d’); 
      
      
     
     
    
    

这一变量可采集画布并绘画图形对象，canctx 包含渲染上下文。 本案例中是二维图形对象。

上下文包含在画布上进行绘画的基本方法，例如，arc()，lineto()，和 fill()。

    
    

     
     

      
      

       
       
1
document.addEventListener("touchstart", startTouchDrawing, true); 
      
      
      
      

       
       
2
document.addEventListener("touchmove", startMoveDrawing, false); 
      
      
      
      

       
       
3
document.addEventListener("touchend", endDrawing, false); 
      
      
      
      

       
       
4
document.addEventListener("touchcancel", cancelDrawing, false); 
      
      
     
     
    
    

当用户的手指在手机屏幕上触摸/移动时，就会创建独立事件。 我们必须处理事件并绘画相应线条。 例如下面的 startMoveDrawing (x, y)函数:

01	function startMoveDrawing (event)

02

03	{ event.preventDefault();//To prevent default behavior

04

05	var eventTouch, x, y;

06

07	eventTouch = event.changedTouches[0];// Array to store previous touch cords,0 is the initial one.

08

09	x = eventTouch.pageX;//The first touch for x co-ordinate

10

11	y = eventTouch.pageY;// The first touch for y co-ordinate

12

13	OnTouchMoveDraw(x, y);

14

15

}

16

17	function OnTouchMoveDraw (x, y)

18

19

{

20

21

22

23	if (x || y)

24

25

{

26

27	if ((start_x === -1) || start_y === -1)

28

29

{

30

31	start_x = x;

32

33	starty_y = y;

34

35

}

36

37	drawLine(x, y);

38

39

Here, the first contention, that is, "starttouch," is the framework event that calls the user-defined function startTouchDrawing. In the code above preventDefault method anticipates the program’s default behavior and initiates the drawing. start_x and start_y are the previous touch positions. The drawLine(x, y) method draws the line.

01	function drawLine(x, y) {

02

03	ctx.beginPath();

04

05	ctx.moveTo(start_x, start_y);

06

07	ctx.lineTo(x, y);

08

09	ctx.stroke();

10

11

}

这里首先一点，“starttouch”是框架事件，它调用由用户定义的函数 startTouchDrawing。 在上述代码中，preventDefault 方法预测程序的默认行为并启动绘画。start_x 和 start_y 是之前的触控位置。 drawLine(x, y) 方法绘画线条。

function drawLine(x, y) { ctx.beginPath(); ctx.moveTo(start_x, start_y); ctx.lineTo(x, y); ctx.stroke(); } 

beginpath() 方法确保我们开始一个新路径。 开始的新路径擦除现有路径(如有)。 您从路径的结尾到开始绘画界面线条时如果发现动画，可能是因为您一开始就没有使用 beginpath() 功能。 为了使用 HTML5 画布生成路径，我们可以关联不同的子路径。 每条新的子路径的最终目标是变为新的设置焦点。 为了完善我们的绘画而开发子路径，我们可使用 lineto()、arcto()、quadraticcurveto() 和 beziercurveto()。 每当我们开始绘画另一条路径(圆圈、线条、矩形、等等)时，我们也可使用 beginpath()。

该线条从 moveTo 函数中的 x, y 坐标起，到线条函数中的 x, y 坐标止。

总之，触控屏革新了计算领域。通过使用 HTML5 中的画布元素，触控事件可轻松处理，为开发人员带来极大便利。

HTML5 是应用开发领域的未来趋势，英特尔相信它可有力推动经验丰富的开发人员采纳这一跨平台方法，并推动新手开发人员快速掌握这一崭新方法从而在所有现代计算平台上部署应用与游戏。 请访问Intel HTML5和Intel Android获取更多项目资源。

其它相关文章与资源

为英特尔® 架构 Android* 设备上的 HTML5 游戏添加声音
使用 HTML5 画布绘画应用
使用 HTML5 构建跨平台应用
HTML5 主页

如需深入了解面向安卓开发人员的英特尔工具，请访问：面向安卓的英特尔® 开发人员专区。

 

英特尔和 Intel 标识是英特尔公司在美国和/或其他国家的商标。
版权所有 © 2013 年英特尔公司。 保留所有权利。
*其他的名称和品牌可能是其他所有者的资产。