Update: Width & Height in EaselJS

August 21, 2013 23 Comments Articles

Since my previous post discussing why we don’t support width & height in EaselJS, I decided to polish off and include a bounds solution we had previously roughed out.

It comprises three new methods available on all display objects: getBounds(), getTransformedBounds(), and setBounds().

The getBounds() method will return the bounds of the object in the object’s local coordinate system (relative to its nominal 0,0 with no transformations) as a Rectangle instance. Where possible, it will return auto-calculated bounds. This includes accurate bounds for Bitmap and Sprite, approximate bounds for Text, and bounds for Container that include all children that return a non-null getBounds() value. For Shape, it returns null by default.

For those object types that don’t calculate their own bounds (Shape), you can manually specify bounds using setBounds(x,y,w,h). This allows the object to participate in Container bounds calculations. It can also be used to override the automatic calculation, to provide more accurate bounds for Text for example, or to reduce bounds calculation costs on Container. Using cache() will similarly override calculated bounds with the cache’s defined bounds.

Here’s a table that describes how each display object works with getBounds:

All All display objects support setting bounds manually using setBounds(). Likewise, display objects that have been cached using cache() will return the bounds of their cache. Manual and cache bounds will override the automatic calculations listed below.
Bitmap Returns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).
Sprite Returns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified in the spritesheet data.
Container Returns the aggregate (combined) bounds of all children that return a non-null value from getBounds().
Shape Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.
Text Returns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are not, especially when using textBaseline values other than “top”.
BitmapText Returns approximate bounds. Values will be more accurate if spritesheet frame registration points are close to (x=0,y=0).

Finally, getTransformedBounds() returns the bounds of the object within its parent coordinate system (ie. with the object’s transformation applied).

Hopefully this balance between functionality, flexibility, and performance works for most users. We’re going to continue to evaluate options for dealing with Shape, and add support for more accurate Text bounds as additional canvas APIs become available.

As always, we’d love to hear your feedback.

23 thoughts on Update: Width & Height in EaselJS

Comments are closed.

  1. Gabriel · October 18, 2013 at 6:16 pm ·

    Hi, im trying to Use getBound on a MovieClip, i know is a movieclip, but it says :

    TypeError: tempChild.getBounds is not a function

    var tempChild = exportRoot.getChildAt(i);
    var tempchildBounds = tempChild.getBounds();

    Am i doing anything wrong??

    thanks a lot

  2. Grant Skinner · October 18, 2013 at 6:24 pm ·

    Gabriel – are you using v0.7.0? getBounds was added in 0.7.0, which isn’t yet supported in Flash Pro (support is coming soon).

      • Grant Skinner · October 18, 2013 at 6:50 pm ·

        Yes, for MovieClip instances in v0.6.0 you can use the frameBounds property directly (this is what getBounds uses in v0.7.0 anyway).

        In your Toolkit publish settings, turn on “multiframe bounds”. Then you can just do this:
        var bounds = myMovieClip.frameBounds[frameIndex];

        That will return a Rectangle instance with the bounds. If you want the current frame’s bounds:

        mc.frameBounds[mc.currentFrame];

        If you don’t turn on multiframe bounds, then the best you can do is to get the first frame bounds with:

        mc.nominalBounds;

        Hope that helps

    • Grant Skinner · October 18, 2013 at 7:50 pm ·

      No problem. Glad to help.

      And as mentioned, in the next version of Flash Pro, getBounds is basically just a shortcut to this same approach, and provides a unified API for all display objects.

  4. JemiloII · March 21, 2014 at 5:45 am ·

    I’m really not a fan about features being removed. Let the user decide if they want the feature or not. I fill like i have to go though leaps and bounds to document the size of every image I want to load in the the canvas. I shouldn’t have to make a function to read the image width and height for Easeljs when it was already created in the first place. I’ll just download an old version and grab out the Bitmap width and height function.

  5. Grant Skinner · March 21, 2014 at 6:11 am ·

    Jemiloll – I’m not sure what features you think were removed? This post is talking about new features that have been added, to make it easier to access width and height.

  6. Pooja · April 10, 2014 at 9:41 am ·

    Hi,
    I m trying to update width n height of a movieclip dynamically bt its creating trouble coz inside a movieclip m having textbox n placement is also changing pls suggest what to do for handling dynamically textbox and movieclip alignment property

  8. Olivier Pons · August 17, 2014 at 3:20 pm ·

    Following your sample

    var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700");
    console.log(text.getBounds());

    I get rectangle height = 85.2; If I try just after this:

    var text = new createjs.Text("Hello World", "bold 6px Arial", "#ff7700");
    console.log(text.getBounds());

    I get rectangle height = 6.
    Ok nice!

    But how to do with fonts in two words like “Libre Baskerville”?

    • Lanny McNie · August 22, 2014 at 6:01 pm ·

      You can separate multiple fonts with commas, and wrap font names with more than one word using single quotes (or double quotes if you are using single quotes on the whole font parameter.

      var text = new createjs.Text("Hello World", "bold 6px Arial,'Times New Roman',sans-serif", "#ff7700");

  9. Simon A. · March 12, 2015 at 3:16 pm ·

    Super clean. Very precise on text width using webfonts. Used the tools to concatenate/align different font sizes (alias superscripts).

    Thanks for this update Grant.

  11. Dmitry · October 9, 2015 at 1:31 pm ·

    Hi, I cant’t deat wit it. I’m a beginner, so I opened tutorial and tried to work it out. It’s simple example: the red circle is moving from left to right, whet the middle of this circle hits the right bounf of the canvas the ball goes to the start. I want to modify it: the ball should go to the start when itcompletely leaves the canvas (if(circle.x + halfOfBallWidth > stage.canvas.width))… , so the problem is, I can’t get “halfOfBallWidth” as I can’t get circle width. circle.getBounds() returns null. How do I properly get this property?

  13. Pingback: Tutorial: Making a Frog Generator with Adobe Animate (HTML5 & CreateJS)

  15. Simon · July 4, 2017 at 12:22 am ·

    Love to know how to get accurate multiline textbox height on iOs… its quadrupled! In my instance, I wanted to create a background shape for each text box using the getBounds().height…

    Think I have to do it manually :(

  16. howeller · January 18, 2018 at 1:13 am ·

    Does “MultiframeBounds” need to be selected in the AnimateCC publish options? If not, is there to run getTransformedBounds on a MovieClip instance? At the moment myMovieClipInstance.getTransformedBounds() returns null, but myMovieClipInstance.nominalBounds returns the rectangle array of my movieclip.
    Thanks!

© Copyright 2024