計算旋轉的HTML元素的原點

我目前正在處理如何在元素旋轉之前查找初始點的問題。計算旋轉的HTML元素的原點

在我的項目中，我有兩個div不能相互容納在一起，導致我遇到的問題。

我想要計算一個已經旋轉的元素的初始點，以便我可以正確地將另一個元素放在它上面，然後應用相同的旋轉度。爲了確保我有合適的座標來處理，我有一個div，每次發生旋轉時都會貼一點點正方形。初始點的藍色方塊和正在旋轉元素的中心點的紅色方塊。我以爲我有Javascript的公式，但似乎有什麼關。我離0度或180度越遠，我的另一個元素就會離開它應有的位置。以下是我目前擁有的公式。

 
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);

我最初的工作在這裏下車的公式：HTML5 Canvas: Calculating a x,y point when rotated

但我有一個可怕的時間讓我的項目才能正常工作。任何幫助，這是非常感謝。如果我需要提供任何其他信息，請告訴我。

http://jsfiddle.net/aSr7J/1/ 這是JS小提琴的問題。目標是計算黑色輪廓框內的水族箱。計算適用於0度和180度，在45度時非常不正確。

來源

2014-02-27 Ant

如果可以在[jsfiddle]（http://jsfiddle.net/）中複製它，這將有所幫助。 – Matt

感謝您的建議。我剛剛發佈了這個問題的js小提琴。 – Ant

@Ant只是爲了將來的參考我覺得在這樣的一般問題中只發布帶有webkit前綴屬性的小提琴會有點令人厭惡。 '變換'在IE10 +和FF方式中前綴爲16前綴。 – Jeremy

的差異的來源是垂直的Y座標如何測量。在html座標中，正Y是向下的，而在數學中，它被假定爲向上。

爲了解決這個問題，只要改變這兩條線：

var dy = rotatedY - centerY;

到

var dy = centerY - rotatedY;

，改變

var initialY = dy2 + centerY;

到

var initialY = centerY - dy2;

這裏是JSFiddle。

來源

2014-02-27 21:37:57 Matt

這是殺了我。我甚至沒有考慮過HTML如何處理它的主要元素，因爲它向下測量+ Y。也許我應該使用底部，但無論如何，非常感謝。我學到了一些非常重要的東西，這些東西在我職業生涯的其餘時間裏可能會繼續存在。再次感謝！ – Ant

我嘗試了一種不同的方法，但也許它可以幫助你。我沒有真正計算旋轉，我只是將相同的變換應用到其他div並計算偏移量。這是我的jsfiddle demo。

注1：我不確定你是否使用jQuery，所以我沒有使用它。但它會使轉換副本更容易。
注2：我在演示中使用了-webkit-前綴，所以如果您使用其他瀏覽器，也許您需要更改這些前綴。 JavaScript代碼也處理其他前綴。

的代碼是：

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"; 
}

來源

2014-02-27 21:29:58 zord

計算旋轉的HTML元素的原點

回答

相關問題