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:

_{(source: jeffryhouser.com)}

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.

possible duplicate of [Calculate Bounding box coordinates from a rotated rectangle, Picture inside.](http://stackoverflow.com/questions/622140/calculate-bounding-box-coordinates-from-a-rotated-rectangle-picture-inside) — Jim Lewis, Jul 25 '10 at 01:21
It sure sounds similar; but I don't understand any of the answers; and that question predates Flex 4 and the "transformX" and "rotationY" properties I'm using. — JeffryHouser, Jul 25 '10 at 01:43
The additional Flex 4 capabilities sound like a good reason to keep this question open. — Jim Lewis, Jul 25 '10 at 01:46
Check out this question: http://stackoverflow.com/questions/2753324/how-to-get-visible-size-of-displayobject-with-perspective-projection And this blog: http://evtimmy.com/2009/12/calculating-the-projected-bounds-using-utils3dprojectvector/ — James Ward, Jul 25 '10 at 14:49

score 1 · Answer 1 · answered Jul 25 '10 at 01:50

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)

answered Jul 25 '10 at 01:50

QueTwo

46
1

This isn't giving what I would have expected either. It works fine if rotationY is zero; but beyond that things get confused. I put together a sample to show off the various approaches people are suggesting: http://www.flextras.com/labs/DisplaySize/DisplaySize.html – JeffryHouser Jul 27 '10 at 12:49

score 1 · Answer 2 · answered Jul 26 '10 at 10:09

1

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.

answered Jul 26 '10 at 10:09

Gregor Kiddie

3,119
1
19
16

On paper; this sounds exactly what what I'm looking for. But, they don't seem to be working the way I'd expect. has no transform. The width is 70 & Height 21. var bounds1 : Rectangle = test2.getRect(this.test2); the bouinds1 width is 72 and height is 23. If I start rotating items; the results seem even less correct. – JeffryHouser Jul 27 '10 at 11:50
I put together a sample to show off the various approaches people are suggesting: http://www.flextras.com/labs/DisplaySize/DisplaySize.html – JeffryHouser Jul 27 '10 at 12:50
The blog James posted looks promising, but really I reckon its a bug if getBounds isn't returning the correct bounds... – Gregor Kiddie Jul 27 '10 at 12:56

score 0 · Accepted Answer · answered Aug 07 '10 at 20:02

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!

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

3 Answers3