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() 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
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
cache() will similarly override calculated bounds with the cache’s defined bounds.
Here’s a table that describes how each display object works with
|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).|
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.
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
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).
No, i’m using 0.6 because i’m exporting from flash pro cs 6 , anything to do to get width and height from an object??
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:
If you don’t turn on multiframe bounds, then the best you can do is to get the first frame bounds with:
Hope that helps
Thanks a lot !! , i works perfectly.
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.
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.
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.
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
I want to convert a movieclip into a bitmap, how can i do this in createjs.
Following your sample
var text = new createjs.Text("Hello World", "bold 86px Arial", "#ff7700");
I get rectangle height = 85.2; If I try just after this:
var text = new createjs.Text("Hello World", "bold 6px Arial", "#ff7700");
I get rectangle height = 6.
But how to do with fonts in two words like “Libre Baskerville”?
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");
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.
getBounds on sprites always return null for me. Is that intended?
No, if the sprite is loaded, it should return a proper bounds.
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?
Hi cant’t get the circle width witch circle.getBounds(). What I’m doing wrong? ( circle = new createjs.Shape(); )
EaselJS can not calculate the bounds of Shapes. Sorry.
Pingback: Tutorial: Making a Frog Generator with Adobe Animate (HTML5 & CreateJS)
FYI, I implemented a simplistic getBounds calculation for the Graphics class. Find it here: https://github.com/jcward/EaselJS-Graphics-bounds
The github page lists what’s implemented and what’s not. Feel free to file issues or submit PRs.
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 :(
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.
multi-frame bounds gives you separate bounds for each frame, instead of just using the first frame.