Leap.JS : LeapMotion을 사용하여 웹 페이지에서 항목을 선택하려면 어떻게해야합니까?

Question

LeapMotion을 사용하여 웹 페이지에서 항목을 선택하려고하고 있는데이 상호 작용을 프로그래밍하는 데 어려움을 겪고 있습니다.

this code as a base (현재 SDK에 연결되도록 링크를 업데이트 함)을 사용하면 내 손이 공간에있는 곳을 기준으로 커서를 이동시킬 수 있습니다. 그러나 LeapMotion을 사용하여 이벤트 수신기 "클릭"과 동등하게 만드는 방법을 모르겠습니다. Leap.js를 사용 중이며 svg.js를 사용하여 GUI를 작성했습니다.

Javascript에서 LeapMotion을 사용하여 선택한 이벤트 수신기를 프로그래밍하는 방법은 무엇입니까?

Answer 1

나는 도약 동작 코드가 있습니다. 나는 소프트웨어를 quize 않았다. 여기 커서는 다음과 같이 스타일이 지정된 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); 
     } 
}