在英特爾架構 Android* 設備上使用 HTML5 遊戲中的觸控屏

作者：Tao Wang (Intel)

隨著智能手機和平板電腦的迅速普及，在這些觸控設備上提供自然體驗的方式也發生瞭巨大變化。原生應用開發人員已經整合瞭觸控事件來提升用戶體驗並改變用戶與內容交互的方式。智能手機和平板電腦等移動設備通常采用敏感的電容式觸控屏采集用戶手指操作。隨著移動網絡開始支持更加先進的應用，web 開發人員需要處理這些事件的解決方案。例如，幾乎任何快速遊戲都需要同時按下多個按鈕的操作，從觸控屏的角度來說就是多觸控操作。

使用 HTML5 中的畫佈元素

本文將詳細介紹基於設備 Android* 設備、使用 HTML5 的觸控事件 API。另外，我們還將探討開發哪些應用，並介紹開發觸控應用的技巧與策略。直到最近移動應用才能使用

HTML5 跨平臺技術處理觸控事件。這是讓移動應用變得更加原生自然的全新方法。由於我們能夠整合觸控事件處理和 HTML5 的新畫佈組件，我們能夠采集用戶的活動並支持用戶利用畫佈組件。 HTML5 對組件的定義是：獨立於分辨率的位圖畫佈，可用來渲染圖形、遊戲圖形或其它動態視覺圖片。根據 web 定義，畫佈包含以 HTML 代碼定義的可畫區域並且帶有高和寬屬性。 JavaScript* 代碼可通過豐富的會話功能集訪問這一區域。

使用 HTML5 觸控事件，應用可為用戶提供與原生應用同樣出色的體驗。通過提供觸控和各種手勢控制，開發人員可幫助用戶迅速穿越應用或構建精彩的交互式遊戲。

開發人員指南

讓我們深入探討如何使用 HTML5 畫佈組件采集用戶觸控事件。

正如萬維網聯盟(W3C)指出：“本規范定義瞭第五個主要版本，首次改動瞭萬維網的核心語言：超文本標記語言(HTML)。”

有四類觸控事件：

touchstarttouchmovetouchendtouchcancel

下面分別詳細介紹。

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>

這與組件十分相似；主要差別是它不具備和質量。組件僅有兩個方面：寬和高。如果出現渲染錯誤，請嘗試在畫佈特性中指明寬高屬性，而不要使用 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 主頁

如需深入瞭解面向安卓開發人員的英特爾工具，請訪問：面向安卓的英特爾? 開發人員專區。