如果你觉得文档很有用,你还可以去我的淘宝购买此文档最新的docx、pdf、html版本。
Leap Motion翻译系列文章http://brightguo.com/leap-motion-official-doc-translation
触摸仿真
Leap Motion的API提供了在你的应用中可以进行仿真的信息。触摸信息是通过尖端类提供的。
概述
Leap 定义了一个自适应的触摸平面,你可以将它与你应用中的二维元素美妙的结合在一起。这个平面粗糙的旋转到与x-y平面平行,但是根据用户的手指和手的位置动态调整。但用户的手或者工具从前方到达平面,Leap会报告尖端物体是接近还是触碰到这个虚拟的平面。API通过2个值汇报与平面相关的信息:触摸平面地带和到触摸平面的距离。
上图:虚拟触摸平面
触摸地带是识别Leap Motion软件是否把尖端当作悬浮在触摸平面,是穿透触摸平面还是相对于屏幕较远(或者指向错误的方向)。地带包含“悬浮”、“触摸”和“无”。触摸地带的转换根据触摸距离变换有一定滞后。这个滞后用于避免突然和反复的变换。如果你在应用中使用这个触摸交互,你可能不需要经常考虑地带。
只有当尖端在悬浮和触摸地带,触摸距离才是有效的。这个距离是归一到[-1,+1]的数值。当一个尖端物体第一次进入悬浮地带,此时触摸距离为+1,而当距离不断减少到0,意味着尖端物体接近触摸平面。但尖端物体穿入平面,距离变为0。因为尖端物体继续往触摸地带推进,距离不断靠近但不会超过-1(永远趋向于-1)。
你可以使用地带数值,根据悬浮还是触摸来决定何时更新界面元素。你还可以使用距离,根据是否靠近平面进一步改变界面元素[一个粗,一个细]。例如,当手指在控制体上并且在悬浮地带,你可以让控制体高亮显示,并且依据用户到底多接近控制体的距离,改变光标形态。
作为触摸仿真API的一部分,Leap Motion为尖端物体,提供了一个额外的相对于标准坐标的稳定坐标。Leap Motion软件使用自适应滤波器来稳定这个位置,可以平滑和降低运动,最终使得它在屏幕上小区域内(例如按钮和链接)更容易地与用户交互。但运动缓慢是平滑效果也越强,这样用户可以调整距离并且更容易的触碰到特定的点[这个效果很赞,和人们在现实世界操作一样]。
获取触摸地带
触摸地带通过尖端类的touchZone属性描述。这些地带都是使用枚举类型标识的,一共有下面三个状态:
#NONE — 尖端距离触摸屏幕太远,大于考虑它触摸的距离。又或者它指向反方向的用户(也就是物体默认在用户正面前,用户手指着自己是一种不合适的操作)
#HOVERING — 尖端物体的顶端已经到达悬浮地带,但不被认为触摸。
#TOUCHING — 尖端到达了虚拟平面内。
下面的代码片段说明如何取回最前面手指的地带标识:
1 2 3 |
Leap::Frame frame = leap.frame(); Leap::Pointable pointable = frame.pointables().frontmost(); Leap::Pointable::Zone zone = pointable.touchZone(); |
获取触摸距离
触摸距离是通过尖端类的touchDistance属性描述的。这个距离范围是+1到-1,对应了手指移向和穿过虚拟触摸平面。这个距离没有物理意义,但却是Leap Motion软件认为的到底有多靠近触碰。
下面的代码段说明如何取出最前端手指的触摸距离:
1 2 3 |
Leap::Frame frame = leap.frame(); Leap::Pointable pointable = frame.pointables().frontmost(); float distance = pointable.touchDistance(); |
获取尖端的稳定坐标
稳定坐标是尖端类的stabilizedTipPosition属性描述的。这个位置根据标准Leap Motion坐标系统参照得出的,但是具有一个上下文相关大量数据的滤波器,所以很稳定。
下面的代码片段描述了如何得到最前端手指的稳定位置:
1 2 3 |
Leap::Frame frame = leap.frame(); Leap::Pointable pointable = frame.pointables().frontmost(); Leap::Vector stabilizedPosition = pointable.stabilizedTipPosition(); |
从Leap Motion坐标系转换到应用坐标系
但使用触摸仿真时,你必须把Leap Motion的坐标空间转化到应用的屏幕空间。为了使得这个操作更简单,Leap Motion的API提供了一个交互箱子类[交互盒子类](IneractionBox)。这个交互箱子类描述Leap Motion视野中的线性物体运动。这个类提供了一个把物体范围中的坐标归一化到[0,1]范围内。你可以归一化一个距离,并且根据应用尺寸,把结果坐标进行缩放,来获取一个在应用中的坐标。
例如,如果你在客户区域中有个具有windowWidth和windowHeight两个度量的窗口,你可以使用以下代码,取得在窗口中触摸点的二维像素坐标:
1 2 3 4 5 6 7 8 |
Leap::Frame frame = leap.frame(); Leap::Finger finger = frame.fingers().frontmost(); Leap::Vector stabilizedPosition = finger.stabilizedTipPosition(); Leap::InteractionBox iBox = leap.frame().interactionBox(); Leap::Vector normalizedPosition = iBox.normalizePoint(stabilizedPosition); float x = normalizedPosition.x * windowWidth; float y = windowHeight - normalizedPosition.y * windowHeight; |
触点例子
下面的例子使用触摸仿真的API,来显示所有在应用窗口下,检测到的尖端物体。这个例子使用了触摸地带来设置点的颜色,使用触摸距离来设置alpha数值。使用了交互盒子类爸稳定的顶点位置被映射到应用窗口中。
上图:触摸点例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
#include "cinder/app/AppNative.h" #include "cinder/gl/gl.h" #include "Leap.h" #include "LeapMath.h" using namespace ci; using namespace ci::app; using namespace std; class TouchPointsApp : public AppNative { public: void setup(); void draw(); private: int windowWidth = 800; int windowHeight = 800; Leap::Controller leap; }; void TouchPointsApp::setup() { this->setWindowSize(windowWidth, windowHeight); this->setFrameRate(120); gl::enableAlphaBlending(); } void TouchPointsApp::draw() { gl::clear( Color( .97, .93, .79 ) ); Leap::PointableList pointables = leap.frame().pointables(); Leap::InteractionBox iBox = leap.frame().interactionBox(); for( int p = 0; p < pointables.count(); p++ ) { Leap::Pointable pointable = pointables[p]; Leap::Vector normalizedPosition = iBox.normalizePoint(pointable.stabilizedTipPosition()); float x = normalizedPosition.x * windowWidth; float y = windowHeight - normalizedPosition.y * windowHeight; if(pointable.touchDistance() > 0 && pointable.touchZone() != Leap::Pointable::Zone::ZONE_NONE) { gl::color(0, 1, 0, 1 - pointable.touchDistance()); } else if(pointable.touchDistance() <= 0) { gl::color(1, 0, 0, -pointable.touchDistance()); } else { gl::color(0, 0, 1, .05); } gl::drawSolidCircle(Vec2f(x,y), 40); } } CINDER_APP_NATIVE( TouchPointsApp, RendererGl ) |
这个例子使用了Cinder库来创建用于绘画的应用窗口。[例子这么简单,怎么玩运行啊]