Question

我希望使用LeapMotion在网页中选择项目，我正在努力编写此交互。

使用this code as a base（但更新链接以便连接到当前的SDK）我可以根据手在空间的位置让光标在窗口移动。但是，我不知道如何制作相应的事件监听器＆＃34; click＆＃34;使用LeapMotion。我正在使用Leap.js并使用svg.js构建了一个粗略的GUI。

如何编写在Javascript中使用LeapMotion选择的事件侦听器？

Answer 1

我有Leap动作的代码。我确实搞了软件。这里的cursor是一个div元素，其样式为：

    #cursor {
        width: 60px;
        height: 60px;
        position: fixed;
        margin-left: 20px;
        margin-top: 20px;
        z-index: 99999;
        opacity: 0.9;
        background: black;
        border-radius: 100%;
        background: -webkit-radial-gradient(100px 100px, circle, #f00, #ff6a00);
        background: -moz-radial-gradient(100px 100px, circle, #f00, #ff6a00);
        background: radial-gradient(100px 100px, circle, #f00, #ff6a00);

    }

和底部的Java脚本。我做了什么，我按位置获取HTML元素并通过点击手势触发点击事件。

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
   // Setting cursor and output position
   window.cursor = $('#cursor');
    var controller= Leap.loop(function(frame) {

    if (frame.pointables.length > 0) {
        try
        {

          var position = frame.pointables[0].stabilizedTipPosition;
          var normalized = frame.interactionBox.normalizePoint(position);
            var cx = w * normalized[0];
            var cy = h * (1 - normalized[1]);
            $('#cursor').css('left', cx);
            $('#cursor').css('top', cy);

        }catch(e){
            console.error(e);
        }
    }
});
 controller.use('screenPosition', {
  scale: 1
});
controller.on('gesture', onGesture);
function onGesture(gesture,frame)
{
        try
        {
            // If gesture type is keyTap
            switch(gesture.type)
            {
                case 'keyTap':
                case 'screenTap':

                  var position = frame.pointables[0].stabilizedTipPosition;
                  var normalized = frame.interactionBox.normalizePoint(position);
                    //Hiding cursor for getting background element
                    cursor.hide();
                    // Trying find element by position
                    var cx = w * normalized[0];
                    var cy = h * (1 - normalized[1]);
                    var el = document.elementFromPoint(cx, cy);
                    cursor.show();
                    console.log(el);
                    if (el) {
                        $(el).trigger("click");
                    }

                break;
            }
        }
        catch (e) {
            console.info(e);
        }
}

Leap.JS：如何使用LeapMotion在网页上选择项目？

1 个答案: