특정 지점을 중심으로 회전

Question

다른 요소 주위로 요소를 회전하려고합니다. 나는이 코드를 조합했다. 코드가 잘 작동한다고해도, 요소의 회전에 약간 문제가있다. 은 매우입니다. 파란색 점은 아래쪽에있을 때 궤도를 떠납니다.

코드를 사용했지만 해결할 수 없었습니다. 당신은 당신은 점의 중심을 계산하지만 좌상의 점을 사용하여 위치하는 Felix Eve's answer.

function markCircleCenter(circ, orig) { 
    if (typeof circ == "string") { 
     var elm = document.getElementById(circ); 
    } else { var circle = circ; } 
    if (typeof orig == "string") { 
     var mark = document.getElementById(orig); 
    } else { var elm = orig; } 
    var width  = parseInt(window.getComputedStyle(elm).width, 10); 
    var height  = parseInt(window.getComputedStyle(elm).height, 10); 
    var top   = parseInt(window.getComputedStyle(elm).top, 10); 
    var left  = parseInt(window.getComputedStyle(elm).left, 10); 
    var markWidth = parseInt(window.getComputedStyle(mark).width, 10); 
    var markHeight = parseInt(window.getComputedStyle(mark).height, 10); 
    var circle = { 
     circle: elm, 
     x: width/2 + left, 
     y: height/2 + top, 
    }; 
    mark.style.position = "absolute"; 
    mark.style.top  = circle.y - markWidth/2 + "px"; 
    mark.style.left  = circle.x - markHeight/2 + "px"; 
    document.body.insertBefore(mark, elm.nextSibling); 
    return circle; 
} 

function placeObjIntoOrbit(obj) { 
    if (typeof obj == "string") { 
     var obj = document.getElementById(obj); 
    } else { var obj = obj; } 
    var objPos = { 
     obj: obj, 
     x: origin.x, 
     y: parseInt(window.getComputedStyle(origin.circle).top, 10) - parseInt(window.getComputedStyle(obj).width, 10)/2, 
    }; 
    obj.style.position = "absolute"; 
    obj.style.top  = objPos.y + "px"; 
    obj.style.left  = objPos.x + "px"; 
    return objPos; 
} 

function rotateObj(pointX, pointY, originX, originY, angle) { 
    var angle = angle * Math.PI/180.0; 
    return { 
     x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX, 
     y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY, 
    }; 
} 

var angle = 0; 
var origin = markCircleCenter("circle", "origin"); 
var point = placeObjIntoOrbit("point"); 

function spin() { 
    if (angle >= 360) { angle = 0; } 
    angle += 2; 
    var newCoor = rotateObj(point.x, point.y, origin.x, origin.y, angle); 
    point.obj.style.left = newCoor.x + "px"; 
    point.obj.style.top = newCoor.y + "px"; 
} 
setInterval("spin('point')", 1000/30); 

Answer 1

에서 가져온 fiddle example.

rotateObj 기능을 확인할 수 있습니다. 위치 지정시 포인트의 크기를 고려해야합니다.

point.obj.style.left = (newCoor.x - 4) + "px"; 
point.obj.style.top = (newCoor.y - 4) + "px"; 

(. 당신은 "- 4"과 대체 절반 폭과 지점의 높이를 제거해야하지만,이 더 간결에서 아이디어를 얻는다)

:에 기능 spin()의 마지막 두 줄을 변경해보십시오