이미지를 시계 방향 또는 시계 반대 방향 중 더 짧은 쪽을 회전하는 방법?

Question

센터의 화살표가있는 시계가 포함 된 웹 페이지를 만들고 있습니다. 사용자가 한 시간 동안 클릭하면, 화살표는 자신이 클릭 한 것을 가리 키도록 회전합니다.

저는 화살표를 회전하기 위해 jQuery 이미지 회전 플러그인 (jQueryRotate)을 사용하고 있습니다. 여기

회전하는 각도의 수를 계산하는 현재 코드이다

사용자가 시간의 한 클릭

var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12 
var sel = 0; // Default hour selection 
var rot = 0; // Default rotation is at the top (0 degrees) 
var gap = 360/numTiles; // Degrees between each tile 

function rotateArrow(num) { 
    rot = num * gap; 
    $("#arrow").rotateAnimation(rot); 
    sel = num; 
} 

그것이 12

그것을 통해 NUM 1의 값으로 전달 문제는 화살표가 1시를 가리키고 사용자가 11시를 클릭하면 화살표가 반 시계 방향으로 60도 회전하는 것이 더 적합 할 때 시계 방향으로 300도 회전한다는 것입니다.

그래서 현재 시간 (num)과 클릭 한 시간 (sel)을 사용하는 방정식을 작성하고 가장 큰 회전 각도와 같은 양수 또는 음수 값을 출력 할 수 있습니까? 효율적이지 않고 단지 한 방향으로 만 회전 할 수 있습니까?

모든 조언을 주시면 감사하겠습니다. 궁금한 점이 있으면 알려주세요. 감사!

Answer 1

이 오히려 지루한 작업을 수행합니다

그것은 반환

function diff(x, y) { 
    var a = (x * Math.PI/180) - Math.PI; 
    var b = (y * Math.PI/180) - Math.PI; 
    return Math.atan2(Math.sin(b - a), Math.cos(b - a)) * (180/Math.PI); 
} 

- 어느 회전이 가장 짧을 지에 따라 180도에서 180 도가됩니다.

diff(360, 20) 
> 19.999999999999993 
diff(20, 360) 
> -19.999999999999993 
diff(0, 160) 
> 160 
diff(0, 190) 
> -170 

Answer 2

기본적으로 가장 가까운 회전 각도는 180도보다 작으므로 각도가 180보다 큰 경우 360도 빼기 만하면 음의 각도를 얻을 수 있습니다. 자신의 예를 든다면 300 도가되면 360도 빼서 -60도를 얻습니다.

그래서 코드의 현재 라인에 추가 할 :

rot = num * gap; 

당신이 필요로하는 모든입니다

if (rot > 180) 
    rot -= 360;