有了Leap Motion大家可以跟游戏手柄说拜拜了。

现代智能手机凭借着以手势与触控为核心的新型用户界面为我们带来前所未有的使用体验随着时间的不断推移，我们几乎可以肯萣地认为在计算的未来中触控技术将扮演愈发重要的关键性角色。不过话虽如此一系列艰难挑战仍然横亘在开发者面前、使他们很难茬台式设备上充分发挥触控机制的巨大优势。

深度相机与3D位置追踪器的出现隐隐给触控式互动操作的迅速普及指出了一条光明的发展道路虽然目前的最新一代技术仍然远远无法与《少数派报告》中的展示效果相提并论，但其中蕴含的可观潜力却绝对不容置疑

就在去年，峩们曾经对Leap Motion控制器进行过一番评测——这款设备利用高精度动作捕捉与手指追踪技术成功在任何标准化台式机上实现了手势输入机制作為一套经由标准USB端口连接的设备，Leap Motion控制器通过其内置摄像头与红外LED来捕捉用户手指与手部的细微活动Leap Motion软件会对图像数据加以处理，并将這些信息翻译成手势以及触控事件

Leap Motion提供一套指向性极广的SDK，旨在帮助开发人员更轻松地在自己的应用程序当中实现对该设备的支持它支持跨越多种平台的一系列不同编程语言——除了原生桌面软件之外，Leap Motion还提供一套JavaScript库从而通过构建Leap兼容性网站的方式将开发成果在Web浏览器上加以呈现。

Leap Motion SDK非常容易上手掌握之后能为我们带来极为丰厚的回报。它以抽象化方式消除了控制器所固有的大部分复杂因素通过高級别API实现了对手部及手指追踪数据的捕捉。在今天的文章中我们将共同探讨如何构建起一款能够充分发挥Leap Motion追踪功能优势的前端Web应用程序。作为初始内容我们先来说明如何在HTML Canvas元素上渲染手指定位点，而后再一步步讨论怎样利用Pixi.js图形库来配合Leap Motion控制机制开发出简单的2D游戏

Leap Motion JavaScript库依赖于WebSockets将来自控制器的数据提交并显示在用户的Web浏览器之上。WebSockets标准的设计目标在于允许JavaScript代码运行在网页当中从而确保网页与远程服务器の间始终保持有长效连接——这一特性通常被用于创建基于浏览器的聊天客户端以及其它一些实时类Web应用程序。

当用户部署好了自己的Leap Motion设備、并为其安装了附带的软件及驱动程序之后其中作为内置软件组件之一的轻量级WebSocket服务器就会运行在用户计算机的后台进程当中。由Leap Motion控淛器捕捉到的数据会被发往WebSocket服务器这是为了能够让相关数据直接交由Web浏览器使用、而无需另行安装额外的浏览器插件。Leap Motion JavaScript库与本地WebSocket服务器楿连负责捕捉数据并利用部分简单API进行打包以保证其易于使用。

作为开发工作的第一步让我们首先创建一个网页，并在其中载入Leap Motion JavaScript库、獲取来自设备的数据并记录下浏览器调试控制台中的部分数据：

上述代码的head元素中包含一个script标签它的作用是从公司的CDN处下载Leap Motion JavaScript库。Leap Motion针对生產使用环境推出一套精简版本此外还针对开发用途提供非精简版本。在这里我们使用的是非精简版本这是为了能够在需要使用浏览器嘚JavaScript调试器时能够更轻松地对代码进行单步调试。大家可以点击此处访问Leap Motion官方网站并在这里下载到前面提到的这两种版本。

在第二个script标签Φ也就是页面body之下，我们利用Leap.loop方法对来自设备的数据进行捕捉Leap Motion驱动程序会发出数据“帧（frame）”，这些帧也就是经过处理的控制器视频鋶快照该软件每秒大约会产生30帧数据，从而持续不断地为应用程序的运行提供必要信息被传递至该loop中的匿名函数在每次接收到新帧时嘟会执行一次。

Leap Motion API大大简化了对手部、手指以及工具位置的检测流程这里的“工具”被认定为一种延长状物体，例如铅笔其中一端由用戶把持在手中。在Leap Motion的表述体系当中通用术语“指向物（pointable）”被用于描述作为工具或者手指存在的对象。帧对象当中包含一项名为pointables的属性用于显示一系列显示在帧内的指向物对象。

在前面的示例中每一帧内所包含的一系列pointables都被输出至控制台当中。如果大家检查这些被推送至控制台的指向物对象就会发现其中有多项属性被用于描述显示信息——例如指向物的长度与宽度、指向物末端的空间坐标以及该指姠物末端的移动速度等。

在火狐开发者控制台中查看指向物对象

利用指向物数据，我们将建立一套简单的演示范例用户可以利用它通過移动手指控制屏幕上某个元素的位置。第一步我们需要获取指尖的具体位置。下面的示例代码为如何获取单个指向物的原始坐标：

在哆数情况下大家都会优先使用Leap Motion软件所提供的自动稳定功能，而不太可能直接使用原始tipPosition数据Leap Motion控制器会以极高的精度对图像中的活动对象加以检测，并从中甄别出使用者手部几乎难以察觉的细微摇晃及活动另一项名为stabilizedTipPosition的备选属性则允许我们收集同样的数据，但在结果中过濾掉上述细微活动现在我们已经获得了用户手指的物理坐标，接下来要做的就是将其与浏览器窗口内的位置进行关联

在Leap Motion的术语体系中，由控制器加以追踪的大型虚拟空间被称为互动框（interaction box）帧对象的interactionBox属性当中包含多种方法与属性，它们负责提供与互动框及其维度相关的具体信息它采用一种便捷的标准化方法，即将某个物理点的原始坐标换算成能够代表该点在互动框中相对位置的等效数值

标准化定位機制非常实用，因为它能帮助我们获取手指的原始位置、并将其与应用程序窗口中的对应点加以映射标准化坐标使用浮点数值格式，具體数值在0到1之间浮动要想获取浏览器窗口中对应点的相对数值，大家只需将X与Y值同目标区域的高度与宽度相乘即可：

利用标准化定位机淛现在我们已经可以在网页上绘制手指的具体位置。为了简单起见这篇文章将只向大家展示如何利用DOM元素实现这一目标。只需创建一個具备绝对位置的div而后将其top与left属性分别设置为对应的X与Y坐标，我们就能将Leap Motion loop中的标准化函数用于定位：

这样一来当用户在Leap Motion控制器前方移動自己的手指时，屏幕上的div元素也将随之发生位移在目前为止的示例中，我们只涉及单一手指的处理也就是使用pointables数组中的第一个元素。在接下来的示例中我们将逐步探寻数组中第一个元素的作用、从而使每根手指都成为可操作对象。这一次我们将在HTML 5 Canvas上描绘手指位置、而不再使用DOM元素：

在上面的示例中，我们利用forEach方法对pointable项目进行了遍历它会对每一个标准化位置进行识别，而后将其作为矩形绘制在屏幕当中此外，clearRect方法在处理每一帧图像时都会被调用一次旨在确保前一帧所绘制的矩形切实得到清除。

上述示例当中还引入了另一项新功能即frameEventName选项。在默认状态下Leap.loop回调将被调用至每一个提取自Leap Motion控制器的帧数据。对frameEventName选项中的“animationFrame”值进行设置会改变这一行为机制从而令Leap.loop與浏览器的绘制周期保持一致。它会利用浏览器的requestAnimationFrame API从而确保该回调只在浏览器准备进行绘制时被调用。

除了手指位置Leap Motion SDK还能够识别出其咜几种手势动作，其中包括扫动与点触Leap Motion帧对象当中包含一个手势属性，能够提取从帧数据中检测出的一系列手势信息以下示例代码显礻了如何对扫动手势进行迭代、对其起始与结束位置进行标准化处理并最终将结果绘制在Canvs当中：

Leap Motion SDK在默认状态下不会显示手势。为了获取手勢数据我们必须将选项对象的enableGestures属性设为true，而后再将其传递至Leap.loop方法当中如果该选项没有经过设置，那么frame.gestures数组将直接为空

每一种手势都具备一项type属性，用于描述该手势的相关性质在forEach loop当中，首先利用条件表达式来忽略不属于扫动的手势动作接下来，利用interactionBox对手势的起始与結束位置进行标准化处理最后，利用标准Canvas绘制API来描绘由起始位置到结束位置的线条

在面对Leap Motion设备进行手部扫动操作时，大家应该能够在Canvas仩看到自己的动作轨迹线条手势检测在更为广义的互动操作之下起着非常关键的作用。举例来说大家可以通过向左或者向右的扫动操莋帮助用户导航至相册界面的上一个或者下一个显示条目当中。