Scaling a rotated object to fit specific rect

Question

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

Basically, I want the opposite of getBoundingClientRect, setBoundingClientRect.

Answer 1

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: 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.

Good luck…

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;

};

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.

EDIT:

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.

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;

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.