How do I get the visual width and height of a rotated component?

Question

I'm playing around with code like this:

<s:Button id="test" label="test" transformX="{Math.floor(test.width/2)}" rotationY="20" x="20" y="20" />

The button is rotated on the Y axis and the rotate pivot is in the middle of the button.

This will create a button that looks something like this:

The rotated button is, visually, filling a different space than the x, y, height, and width values would you have believe.

The "A" value in my image is the height of the button. But, what I want to use for calculation and placement purposes is the B value.

Additionally, I'd like to perform similar calculations with the width; getting the width from the top right corner to the bottom left corner.

How do I do this?

---

I put together a sample to show off the various approaches for calculating this that people are suggesting. The source code is also available. Nothing is quite working like I'd expect. For example, turn the rotationSlider to 85. The button is effectively invisible, yet all approaches are still giving it height and width.

Answer 1

My math may be a bit rusty, but this is how I would find the answer :

You would extend a right-triangle from the right edge of the button to the bottom-most point of the diagram you have (A-B). You can then use the Law of Sines to get three angles : 90', 20' and 70' (90 will always be there, and then your variable - 180 for the third angle).

You can then use the following formula to find your answer :

B = ((button.width * sin(button.rotationY)) / (sin(90 -button.rotationY)) + (button.height)

Answer 2

getBounds(..) and getRect(..) are supposed to be the methods for getting the width and height of transformed objects.

Not tried them in Flex 4 yet, but they always worked for me in Flex 3.

Answer 3

The answer was in one of the comments from James Ward on this question and is located at this blog post.

The one thing the blog post doesn't say is that in many cases, the perspectiveProjection property of the transform property on the class in question will be null. The linked to example took care of this by setting the maintainProjectionCenter property to true. But, you could also create a new perspectiveProjection object like this:

object.transform.perspectiveProjection = new PerspectiveProjection();

I wrapped up the function from evtimmy into a class:

/**
 * DotComIt/Flextras 
 * Utils3D.as
 * Utils3D
 * jhouser
 * Aug 5, 2010
 */
package com.flextras.coverflow
{
    import flash.geom.Matrix3D;
    import flash.geom.PerspectiveProjection;
    import flash.geom.Rectangle;
    import flash.geom.Utils3D;
    import flash.geom.Vector3D;

    public class TransformUtilities
    {
        public function TransformUtilities()
        {
        }


    //--------------------------------------------------------------------------
    //
    //  Methods
    //
    //--------------------------------------------------------------------------

    //----------------------------------
    //  projectBounds
    //----------------------------------
    // info from 
    // http://evtimmy.com/2009/12/calculating-the-projected-bounds-using-utils3dprojectvector/

    /**
     * Method retrieved from  
     * http://evtimmy.com/2009/12/calculating-the-projected-bounds-using-utils3dprojectvector/
     * 
     * @param bounds:  The rectangle that makes up the object
     * @param matrix The 3D Matrix of the item
     * @param the projection of the item's parent.
     */
    public static function projectBounds(bounds:Rectangle,
                                         matrix:Matrix3D, 
                                         projection:PerspectiveProjection):Rectangle
    {
        // Setup the matrix
        var centerX:Number = projection.projectionCenter.x;
        var centerY:Number = projection.projectionCenter.y;
        matrix.appendTranslation(-centerX, -centerY, projection.focalLength);
        matrix.append(projection.toMatrix3D());

        // Project the corner points
        var pt1:Vector3D = new Vector3D(bounds.left, bounds.top, 0); 
        var pt2:Vector3D = new Vector3D(bounds.right, bounds.top, 0) 
        var pt3:Vector3D = new Vector3D(bounds.left, bounds.bottom, 0);
        var pt4:Vector3D = new Vector3D(bounds.right, bounds.bottom, 0);
        pt1 = Utils3D.projectVector(matrix, pt1);
        pt2 = Utils3D.projectVector(matrix, pt2);
        pt3 = Utils3D.projectVector(matrix, pt3);
        pt4 = Utils3D.projectVector(matrix, pt4);

        // Find the bounding box in 2D
        var maxX:Number = Math.max(Math.max(pt1.x, pt2.x), Math.max(pt3.x, pt4.x));
        var minX:Number = Math.min(Math.min(pt1.x, pt2.x), Math.min(pt3.x, pt4.x));
        var maxY:Number = Math.max(Math.max(pt1.y, pt2.y), Math.max(pt3.y, pt4.y));
        var minY:Number = Math.min(Math.min(pt1.y, pt2.y), Math.min(pt3.y, pt4.y));

        // Add back the projection center
        bounds.x = minX + centerX;
        bounds.y = minY + centerY;
        bounds.width = maxX - minX;
        bounds.height = maxY - minY;
        return bounds;
    }

    }

}

Although that is the answer to my question, I'm not sure if it was the solution to my problem. Thanks everyone!