svg - 缩放旋转对象以适合特定矩形

Question

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

基本上，我想要 getBoundingClientRect 的反面，setBoundingClientRect。

Answer 1

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

但是：这是对您对 AABB 感兴趣的情况的描述，表示轴对齐的边界框，getBoundingClientRect对于真实的旋转边界框，交付的结果是什么，因此在这种情况下，矩形本身需要计算 (并应用）宽度和/或高度的比例因子。

祝你好运……</p>

编辑：：

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>，不要替换整个矩阵，将其与实际应用的矩阵连接，或将其作为新项目附加到变换列表中，但请确保不要将其插入现有项目之前. 在矩阵连接的情况下，请确保保留乘法的顺序。

最后的步骤取决于您的实现，您如何处理转换，如果您不知道您有哪些可能性，请查看此处并特别注意实现此操作所需的 DOMInterfaces。