缩放旋转的对象以适合特定的rect

Question

如何找到旋转的Rect元素的缩放比例，以使其适合特定尺寸的边界矩形（未旋转）？

基本上，我想要与getBoundingClientRect，setBoundingClientRect相反。

Answer 1

首先，您需要使用<svg>.getTransformToElement将变量应用于元素，以及rect.getBBox()的结果，您可以计算实际大小。宽度，您可以将比例因子计算为所需的大小，并将其添加到rect的变换中。有了这个，我的意思是你应该将实际的变换矩阵与一个新的比例矩阵相乘。

但是：这是对你对AABB感兴趣的情况的描述，意味着轴对齐的边界框，getBoundingClientRect的结果为真实的旋转边界框提供了什么，所以矩形本身在在这种情况下，您需要从宽度和/或高度计算（并应用）比例因子。

祝你好运......

EDIT ::

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。