Leap Motion JavaScript开发手势控制基础篇

在上篇《 Node.js Leap Motion 开启AR的小窗》中，我们介绍了如何写一个Leap Motion的Hello World。

这一篇，让我们来玩玩简单的手势控制。

Leap Motion JavaScript手势控制

这次，我们需要在起Server的时候，允许手势控制：

var  leapjs = require('leapjs'),   controller = new leapjs.Controller({     enableGestures: true,     frameEventName: 'animationFrame'   });

然后，就是客户端代码。

这时，我们的客户端将通过 ws://127.0.0.1:6437/v6.json 来获取一些相关的数据，如下是一个手势时返回的数据：

[  {   "currentFrameRate": 115.121,   "devices": [],   "gestures": [    {     "direction": [      0.043004399999999998,      0.99689099999999997,      -0.066029199999999996     ],     "duration": 0,     "handIds": [      646     ],     "id": 7,     "pointableIds": [      6461     ],     "position": [      -33.822299999999998,      196.53899999999999,      -100.524     ],     "speed": 223.33099999999999,     "startPosition": [      -39.386699999999998,      67.549899999999994,      -91.980800000000002     ],     "state": "start",     "type": "swipe"    }   ]    ... ]

通过判断数据中的 gesture.type ，我们可以判断这是一个Swipe(滑动)手势。

如下是一个circle类似：

"gestures": [    {     "center": [      -41.580500000000001,      124.26600000000001,      -15.910399999999999     ],     "duration": 0,     "handIds": [      645     ],     "id": 11,     "normal": [      0.75557799999999997,      -0.176064,      0.63095400000000001     ],     "pointableIds": [      6450     ],     "progress": 0.78971100000000005,     "radius": 36.578299999999999,     "state": "start",     "type": "circle"    }   ],

我们只需要通过判断gesture.direction的值就可以判断是往哪个方面，代码如下：

var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]); //Classify as right-left or up-down if (isHorizontal) {   if (gesture.direction[0] > 0) {     swipeDirection = "right";   } else {     swipeDirection = "left";   } } else { //vertical   if (gesture.direction[1] > 0) {     swipeDirection = "up";   } else {     swipeDirection = "down";   } }

Leap Motion手势控制

So，我们可以判断下手势的类似：

Leap.loop(function (frame) {     if (frame.valid && frame.gestures.length > 0) {       frame.gestures.forEach(function (gesture) {         switch (gesture.type) {           case "circle":             console.log("Circle Gesture");             break;           case "keyTap":             console.log("Key Tap Gesture");             break;           case "screenTap":             console.log("Screen Tap Gesture");             break;           case "swipe":             console.log("Swipe");             handleSwipe(gesture);             break;         }       });     }

随后，依据手势的类似来判断方向，如:

      var handleSwipe = function (gesture) {         var swipeDirection;         //Classify swipe as either horizontal or vertical         var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);         //Classify as right-left or up-down         if (isHorizontal) {           if (gesture.direction[0] > 0) {             swipeDirection = "right";           } else {             swipeDirection = "left";           }         } else { //vertical           if (gesture.direction[1] > 0) {             swipeDirection = "up";           } else {             swipeDirection = "down";           }         }         console.log(swipeDirection);         window.swipeDirection = swipeDirection;         return swipeDirection;       };

等我们完成了更多的连接和判断，我们就可以完成与Oculus的集成。