缩放旋转对象以适应特定的矩形

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。