회전 된 HTML 요소의 원점 계산

Question

현재 요소가 회전되기 전에 시작점을 찾는 방법에 대한 문제를 다루고 있습니다.

내 프로젝트에는 동일한 컨테이너에있을 수없는 두 개의 div가있어서 문제가 발생합니다.

나는 이미 회전 된 요소의 초기 점을 계산하여 그 위에 다른 요소를 올바르게 배치 한 다음 동일한 회전 각도를 적용 할 수 있습니다. 작업 할 올바른 좌표를 가지도록하려면 회전이 발생할 때마다 작은 사각형의 스탬프가있는 div가 있습니다. 초기 점의 파란색 사각형과 요소가 회전중인 중심점의 빨간색 사각형입니다. Javascript에서 수식을 가지고 있다고 생각했지만 뭔가 이상한 것 같습니다. 0도 또는 180도에서 더 멀리 떨어져있을수록 멀리 떨어져있는 다른 요소는 예상되는 위치에서 벗어납니다. 아래는 제가 현재 가지고있는 공식입니다. HTML5 Canvas: Calculating a x,y point when rotated

을하지만 끔찍한 시간이 제대로 작동하려면 내 프로젝트를 얻는 데 :

 
var angle = (integer passed in to the function. Example: 45) 
var rotatedX = blueBox.getBoundingClientRect().left; 
var rotatedY = blueBox.getBoundingClientRect().top; 
var centerX = redBox.getBoundingClientRect().left; 
var centerY = redBox.getBoundingClientRect().top; 

var dx = rotatedX - centerX; 
var dy = rotatedY - centerY; 

var toRadians = (Math.PI/180); 
var dx2 = dx * Math.cos(toRadians * angle) - dy * Math.sin(toRadians * angle); 
var dy2 = dx * Math.sin(toRadians * angle) + dy * Math.cos(toRadians * angle); 

var initialX = dx2 + centerX; 
var initialY = dy2 + centerY; 

elementToRotate.style.top = initialX + "px"; 
elementToRotate.style.left = initialY + "px"; 

//This just applies the CSS transform:rotate(45deg) to the element 
elementToRotate.rotateDegrees(angle); 

원래는 여기에 공식 떨어져 일하고 있었다. 이것에 대한 도움은 크게 감사하겠습니다. 추가 정보를 제공해야하는 경우 알려주십시오.

http://jsfiddle.net/aSr7J/1/ 이것은 JS Fiddle 문제입니다. 검은 색 윤곽선이있는 상자 안의 아쿠아 박스를 계산하는 것이 목표입니다. 계산은 0도와 180도에서 작동하며 45도에서 매우 정확하지 않습니다.

Answer 1

소스는 수직 Y 좌표를 측정하는 방법이다. html 좌표에서 양수 Y는 아래쪽이지만 수학에서는 위쪽으로 가정됩니다.

은이 두 라인 변경이 차지하려면

var dy = rotatedY - centerY; 

var dy = centerY - rotatedY; 

및 변경

var initialY = dy2 + centerY; 

에

var initialY = centerY - dy2; 

여기에 JSFiddle입니다.

Answer 2

다른 접근 방식을 시도했지만 어쩌면 도움이 될 수 있습니다. 나는 실제로 회전을 계산하지 않았고, 다른 div에 동일한 변환을 적용하고 오프셋을 계산했습니다. 여기 내 jsfiddle demo입니다.

주 1 : jQuery를 사용하고 있는지 확실하지 않으므로 사용하지 않았습니다. 그러나 변환 사본을보다 쉽게 ​​만들 수 있습니다.
주 2 : 내 데모에는 -webkit- 접두어가 사용되었으므로 다른 브라우저를 사용하는 경우이를 변경해야 할 수도 있습니다. 자바 스크립트 코드는 다른 접두사도 처리합니다.

코드는 : 불일치

function alignRedToBlue() { 
    var blue = document.getElementById("blue"), 
     blueStyle = window.getComputedStyle(blue, null), 
     red = document.getElementById("red"), 
     props = ["transform", "-moz-transform","-webkit-transform", "-ms-transform", "-o-transform"], 
     index, prop; 
    for (index in props) { 
     prop = props[index]; 
     red.style[prop] = blueStyle.getPropertyValue(prop); 
    } 
    red.style.top = blue.offsetTop + (blue.offsetHeight - red.offsetHeight)/2 + "px"; 
    red.style.left = blue.offsetLeft + (blue.offsetWidth - red.offsetWidth)/2 + "px"; 
}