縮放旋轉對象以適應特定的矩形

Question

如何找到縮放旋轉矩形的比例，以便使其適合特定大小的邊界矩形（未旋轉）？

基本上，我想getBoundingClientRect，setBoundingClientRect的相反。

Answer 1

首先，您需要獲取應用於該元素的變換，使用<svg>.getTransformToElement以及rect.getBBox()的結果可以計算實際大小。寬度，您可以將比例因子計算爲所需的大小，並將其添加到矩形的變換中。這意味着你應該將實際的變換矩陣乘以一個新的尺度矩陣。

但是：這是對您對AABB感興趣的情況的描述，意思是軸對齊的邊界框，getBoundingClientRect爲真實的旋轉邊界框提供了什麼結果，所以矩形本身在這種情況下，您需要從寬度和/或高度計算（並應用）比例因子。

好運...

編輯::

function getSVGPoint(x, y, matrix){ 
    var p = this._dom.createSVGPoint(); 
    p.x = x; 
    p.y = y; 
    if(matrix){ 
     p = p.matrixTransform(matrix); 
    } 
    return p; 
} 

function getGlobalBBox(el){ 
    var mtr = el.getTransformToElement(this._dom); 
    var bbox = el.getBBox(); 
    var points = [ 
     getSVGPoint.call(this, bbox.x + bbox.width, bbox.y, mtr), 
     getSVGPoint.call(this, bbox.x, bbox.y, mtr), 
     getSVGPoint.call(this, bbox.x, bbox.y + bbox.height, mtr), 
     getSVGPoint.call(this, bbox.x + bbox.width, bbox.y + bbox.height, mtr) ]; 

    return points; 

}; 

與此代碼我一次做了類似的伎倆... this._dom指<svg>和el的元素。第二個函數返回一個點陣列，從右上角開始，沿着bbox逆時針方向。

編輯：

的<element>.getBBox()結果不包括被施加到元件的變換和我想，新的所需尺寸是絕對座標。所以你需要做的第一件事就是製作»BBox«全球。

比可以計算出比例係數由SX和SY：

var sx = desiredWidth/globalBBoxWidth; 
var sy = desiredHeight/globalBBoxHeight; 

var mtrx = <svg>.createSVGMatrix(); 
mtrx.a = sx; 
mtrx.d = sy; 

比你要這個矩陣附加到元素的轉換列表，或與實際的串接，並取代它，取決於你的實現。這個技巧中最令人困惑的部分是確保您計算具有相同轉換（其中絕對值方便）的座標的縮放因子。在這之後您應用的縮放比例調整改造<element>的，不用更換整個矩陣，與實際應用的一個串聯，或將其追加到轉換列表作爲新的項目，但要確保你不會對現有之前插入項目。在矩陣連接的情況下，確保保持乘法的順序。

最後一步取決於你的實現，你如何處理轉換，如果你不知道你有什麼可能，請看看here並特別注意你需要實現的DOMInterfaces。