缩放旋转的对象以适合特定的矩形 [英] Scaling a rotated object to fit specific rect

问题描述

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

How can I find the scale ratio a rotated Rect element in order fit it in a bounding rectangle (unrotated) of a specific size?

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

Basically, I want the opposite of getBoundingClientRect, setBoundingClientRect.

推荐答案

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

First you need to get the transform applied to the element, with <svg>.getTransformToElement, together with the result of rect.getBBox() you can calculate the actual size. Width this you can calculate the scale factor to the desired size and add it to the transform of the rect. With this I mean that you should multiply actual transform matrix with a new scale-matrix.

BUT:这是对您对AABB感兴趣的情况的描述，表示轴对齐的边界框，对于真实的旋转边界框，getBoundingClientRect的结果传递的是什么，因此在这种情况下为矩形本身，您需要根据宽度和/或高度计算(并应用)比例因子.

BUT: This is a description for a case where you are interested in the AABB, means axis aligned bounding box, what the result of getBoundingClientRect delivers, for the real, rotated bounding box, so the rectangle itself in this case, you need to calculate (and apply) the scale factor from the width and/or height.

祝你好运……

:

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逆时针旋转.

with this code i one time did a similar trick... this._dom refers to a <svg> and el to an element. The second function returns an array of points, beginning at the top-right edge, going on counter clockwise arround the bbox.

<element>.getBBox()的结果不包括应用于元素的变换，我想新的所需大小在绝对坐标中.因此，您需要做的第一件事就是将»BBox«设置为全局.

the result of <element>.getBBox() does not include the transform that is applied to the element and I guess that the new desired size is in absolute coordinates. So the first thing you need to is to make the »BBox« global.

比您可以通过以下方式计算sx和sy的比例因子:

Than you can calculate the scaling factor for sx and sy by:

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

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

取决于您的实现，您不必将此矩阵附加到元素的转换列表中，或将其与实际元素连接并替换它.此技巧最令人困惑的部分是确保您在相同转换(方便使用绝对转换)中使用坐标来计算比例因子.此后，将缩放比例应用于<element>的变换，请勿替换整个矩阵，将其与实际应用的矩阵连接，或将其作为新项附加到变换列表中，但请确保不要插入它在现有项目之前.如果是矩阵级联，请确保保留乘法顺序.

Than you have to append this matrix to the transform list of your element, or concatenate it with the actual and replace it, that depends on you implementation. The most confusion part of this trick is to make sure that you calculate the scaling factors with coordinates in the same transformation (where absolute ones are convenient). After this you apply the scaling to the transform of the <element>, do not replace the whole matrix, concatenate it with the actually applied one, or append it to the transform list as new item, but make sure that you do not insert it before existing item. In case of matrix concatenation make sure to preserve the order of multiplication.

最后一步取决于您的实现，如何处理转换，如果您不知道自己有哪些可能性，请看一下

The last steps depend on your Implementation, how you handle the transforms, if you do not know which possibilities you have, take a look here and take special care for the DOMInterfaces you need to implement this.

这篇关于缩放旋转的对象以适合特定的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！