變換後的寬度/高度

如何在應用transform: rotate(45deg);後檢索寬度和高度屬性？變換後的寬度/高度

像旋轉後的11x11平方變成17x17（Chrome結果），但javascript仍然返回原始寬度/高度 - 10x10。

我該如何得到這17x17？

2011-09-27 jolt

我不知道爲什麼你得到17×17，認爲它是由45度11×11旋轉，則新的層面應該是15×15，16×16或我 – jondinham

認爲瀏覽器會自動ceils的餘弦的結果。 – jolt

即使旋轉某些東西的尺寸也不會改變，所以您需要一個包裝。嘗試用另一個div元素包裝的股利和算上包裝尺寸：

<style type="text/css"> 
    #wrap { 
    border:1px solid green; 
    float:left; 
    } 

    #box { 
    -moz-transform:rotate(120deg); 
    border:1px solid red; 
    width:11px; 
    height:11px; 
    } 
    </style> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    alert($('#box').width()); 
    alert($('#wrap').width()); 
    }); 
    </script> 
</head> 

<body> 
<div id="wrap"> 
    <div id="box"></div> 
    </div> 
</body>

Redited：包裝解決方案不能正常工作，因爲包裝不會自動調整到內div的內容。按照數學解：

var rotationAngle; 

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);

來源

2011-09-27 07:37:46 nonouco

也許在Firefox中它不會更改，但Chrome在檢查器視圖中顯示計算值。包裝是一個很好的解決方案，但它很昂貴。 – jolt

@Tom Firefox的行爲就像你描述的一樣。首先我們需要保持清楚，旋轉的盒子仍然具有相同的尺寸。如果你在桌上旋轉一張紙，其尺寸保持不變。這就是爲什麼你需要包裝。如果你不能支持它，你需要數學來計算你需要的尺寸。相同的數學，firefox在內部使用來計算包裝的尺寸。請在這裏考慮我的+1。 – nonouco

是的，當你發佈這個，我已經做了一個函數來計算新的維度。 -1表示CSS3/DOM3/HTML5，用於不使原始函數檢索這些基本值。 – jolt

如果你正在尋找一個函數以編程方式計算這些值...

// return an object with full width/height (including borders), top/bottom coordinates 
var getPositionData = function(el){ 
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset()); 
}; 

// get rotated dimensions 
var transformedDimensions = function(el, angle){ 
    var dimensions = getPositionData(el); 
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) }; 
}

這裏有一個小東西，我忍了。可能不是有史以來最好的事情，但爲我做這份工作。

來源

2011-09-27 08:27:34 jolt

不要自己計算它，你可以通過HTMLDOMElement的getBoundingClientRect()得到它。

這將返回一個包含正確的height和width的對象，同時考慮到變換矩陣。

jsFiddle。

來源

2013-08-21 12:05:57 alex

ps不能與$一起工作，僅與：querySelector – user956584

@Userpassword是的，這就是jQuery的工作原理。你需要使用'[0]'或'get（0）'或類似的。 – alex

我只有這樣才能正常工作。是的，我知道這個問題很古老，但如果今天提出這個問題，我希望這應該是被接受的答案。 – bestprogrammerintheworld

我給這個函數，domvertices.js

它計算的任何，深，transform編4個頂點三維座標，position編輯DOM元素 - 真的只是任何元素：看DEMO。

a    b 
+--------------+ 
|    | 
|  el  | 
|    | 
+--------------+ 
d    c 

var v = domvertices(el); 
console.log(v); 
{ 
    a: {x: , y: , z: }, 
    b: {x: , y: , z: }, 
    c: {x: , y: , z: }, 
    d: {x: , y: , z: } 
}

有了這些頂點，你可以計算當中任何內容：寬度，高度......例如，你的情況：

// norm(a,b) 
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

更多相關信息，請參見README。

發佈，作爲一個CommonJS的模塊，所以只是安裝它：

npm install domvertices

乾杯。

來源

2015-05-10 22:44:26 abernier

您的先生，值得一枚獎章。 http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e – Orwellophile

酷！對於那些記住數學不太好的我們這些人來說，一個非常不錯的加法是'width'和'height'（或'w，h'）;）即使'函數'會很好，如果你想避免calcs if他們沒有使用。 – Campbeln

@abernier [也許你是誰可以回答我的問題（賞金+100）？任何幫助是非常apreciated ...]（https://stackoverflow.com/questions/45578101/formular-to-calculate-width-height-relative-to-parent-of-container-with-transl） – Axel

-1

我正在寫這個答案，因爲你已經標記了JQuery。

Jquery在計算維度時考慮了變換因素。

所以，如果你使用

$('mySelector').width()

它會給你的實際寬度。同去同height()，left()和top()

來源

2016-07-20 07:05:14

變換後的寬度/高度

回答

相關問題