Leap.JS: Как я могу выбрать элементы на веб-странице, используя LeapMotion?

Question

Я ищу, чтобы выбрать элементы на веб-странице, используя LeapMotion, и я борюсь с программированием этого взаимодействия.

Используя этот код в качестве основы (но обновляя ссылку, чтобы она соединялась с текущим SDK), я могу заставить свой курсор перемещаться по окну в зависимости от того, где находится моя рука в пространстве. Однако я не знаю, как сделать эквивалент щелчка слушателя событий с помощью LeapMotion. Я использую Leap.js и построил сырой графический интерфейс с помощью svg.js.

Как мне запрограммировать прослушиватель событий, который выбирает, используя LeapMotion в Javascript?

Answer 1

У меня есть рабочий код с Leap motion. Я тестировал программное обеспечение. Здесь курсор является элементом 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);
        }
}