2014-06-16 4 views
1

마우스 포인트를 항상 가리 키도록 사각형을 회전하려고합니다.PhysicsJS - 마우스 위치를보기 위해 요소를 회전하는 방법

나는 이것을 시도했다 :

document.getElementById('viewport').onmousemove = function(e){ 

    var scratch = Physics.scratchpad(); 
    mousePos = scratch.vector().set(e.x, e.y); 

    var newAngle = box.state.pos.angle(mousePos); 
    box.state.angular.pos = newAngle; 

    scratch.done(); 
}; 

감사합니다.

답변

1

아마 이런 식으로 뭔가를 시도 :

document.getElementById('viewport').onmousemove = function(e){ 

    var scratch = Physics.scratchpad(); 
    // assuming your viewport is the whole screen 
    mousePos = scratch.vector().set(e.pageX, e.pageY); 
    mousePos.vsub(box.state.pos); // get vector pointing towards mouse pos 

    var newAngle = mousePos.angle(); // get angle with respect to x axis 
    box.state.angular.pos = newAngle; 

    scratch.done(); 
}; 
+0

감사합니다! 완벽하게 일했습니다. 마우스 위치와 상자 위치 사이의 각도가 작동하지 않는 이유와 그 두 벡터의 빼기와 x 축의 각도가 왜 다른지 설명 할 수 있습니까? 아니면이 사실을 알기 위해 페이지로 리디렉션 할 수 있습니까? – Konz

+0

'.angular.pos'는 항상 x 축을 기준으로합니다. 따라서 x 축에 대해 각도를 가져와야합니다. 당신이 계산 한 것은 다른 각도였습니다. 이 그림이 너무 끔찍한 설명이 아니기를 바랍니다 : http://screencast.com/t/lbS7AN8rtWpa – Jasper

+0

이 답변을 주셔서 감사합니다. 여전히 다이어그램의 축이 맨 위 왼쪽 대신 왼쪽 아래에 (0,0)이 있는지 (필자는 PhysicsJS의 모든 좌표가 왼쪽 위 기반인지 생각하지 않습니다.). 또한 위 코드 예제에서 제공 한 각도에 90도 (Math.PI/2)를 추가해야 마우스 위치와 정렬 할 수 있습니다. 왜 그런가요? 감사합니다. – bartzy