getBounds() method for EaselJS DisplayObjects

Please correct me if I’m wrong here, but I was looking for a method or property to retrieve the boundaries of a DisplayObject in EaselJS – however I was not able to find it – so I wrote my own method for this, maybe this will help someone and hopefully a method like this will be implemented into the framework in the future. If someone knows about the existence of such a method, please post it in the comments, so I can update this post.

Update (12-06-2012): I updated the snipped to work with the current easelJS version, it also includes rotation now.

Update (03-14-2013): Please refer to the following library: https://github.com/olsn/Collision-Detection-for-EaselJS it contains the getBounds()-method and is regularly updated and contains bugfixes

/*
 * Calculated the boundaries of an object.
 *
 * @method getBounds
 * @param {DisplayObject} the object to calculate the bounds from
 * @return {Rectangle} The rectangle describing the bounds of the object
 */
function getBounds(obj) {
  var bounds={x:Infinity,y:Infinity,width:0,height:0};
  if ( obj instanceof createjs.Container ) {
    var children = obj.children, l=children.length, cbounds, c;
    for ( c = 0; c &lt; l; c++ ) {
      cbounds = getBounds(children[c]);
      if ( cbounds.x &lt; bounds.x ) bounds.x = cbounds.x;
      if ( cbounds.y &lt; bounds.y ) bounds.y = cbounds.y;
      if ( cbounds.width &gt; bounds.width ) bounds.width = cbounds.width;
      if ( cbounds.height &gt; bounds.height ) bounds.height = cbounds.height;
    }
  } else {
    var gp,gp2,gp3,gp4,imgr;
    if ( obj instanceof createjs.Bitmap ) {
      imgr = obj.image;
    } else if ( obj instanceof createjs.BitmapAnimation ) {
      if ( obj.spriteSheet._frames &amp;&amp; obj.spriteSheet._frames[obj.currentFrame] &amp;&amp; obj.spriteSheet._frames[obj.currentFrame].image )
        imgr = obj.spriteSheet.getFrame(obj.currentFrame).rect;
      else
        return bounds;
    } else {
      return bounds;
    }

    gp = obj.localToGlobal(0,0);
    gp2 = obj.localToGlobal(imgr.width,imgr.height);
    gp3 = obj.localToGlobal(imgr.width,0);
    gp4 = obj.localToGlobal(0,imgr.height);

    bounds.x = Math.min(Math.min(Math.min(gp.x,gp2.x),gp3.x),gp4.x);
    bounds.y = Math.min(Math.min(Math.min(gp.y,gp2.y),gp3.y),gp4.y);
    bounds.width = Math.max(Math.max(Math.max(gp.x,gp2.x),gp3.x),gp4.x) - bounds.x;
    bounds.height = Math.max(Math.max(Math.max(gp.y,gp2.y),gp3.y),gp4.y) - bounds.y;
  }

  return bounds;
}

* Calculated the boundaries of an object.

* @method getBounds

* @param {DisplayObject} the object to calculate the bounds from

* @return {Rectangle} The rectangle describing the bounds of the object

function getBounds(obj) {

var bounds={x:Infinity,y:Infinity,width:0,height:0};

if ( obj instanceof createjs.Container ) {

var children = obj.children, l=children.length, cbounds, c;

for ( c = 0; c < l; c++ ) {

cbounds = getBounds(children[c]);

if ( cbounds.x < bounds.x ) bounds.x = cbounds.x;

if ( cbounds.y < bounds.y ) bounds.y = cbounds.y;

if ( cbounds.width > bounds.width ) bounds.width = cbounds.width;

if ( cbounds.height > bounds.height ) bounds.height = cbounds.height;

}

} else {

var gp,gp2,gp3,gp4,imgr;

if ( obj instanceof createjs.Bitmap ) {

imgr = obj.image;

} else if ( obj instanceof createjs.BitmapAnimation ) {

if ( obj.spriteSheet._frames && obj.spriteSheet._frames[obj.currentFrame] && obj.spriteSheet._frames[obj.currentFrame].image )

imgr = obj.spriteSheet.getFrame(obj.currentFrame).rect;

else

return bounds;

} else {

return bounds;

}

gp = obj.localToGlobal(0,0);

gp2 = obj.localToGlobal(imgr.width,imgr.height);

gp3 = obj.localToGlobal(imgr.width,0);

gp4 = obj.localToGlobal(0,imgr.height);

bounds.x = Math.min(Math.min(Math.min(gp.x,gp2.x),gp3.x),gp4.x);

bounds.y = Math.min(Math.min(Math.min(gp.y,gp2.y),gp3.y),gp4.y);

bounds.width = Math.max(Math.max(Math.max(gp.x,gp2.x),gp3.x),gp4.x) - bounds.x;

bounds.height = Math.max(Math.max(Math.max(gp.y,gp2.y),gp3.y),gp4.y) - bounds.y;

}

return bounds;

}

Disclaimer: I did NO extensive testing on this method, if you find any bug, please post it in the comments, also I would like to point out that the method does NOT consider the rotation or skew parameters.

Pingback: Retro Style Plattform Runner Game for mobile with EaselJS (Part 2) | indiegamr
http://www.refactored.fr Tony

Hello,

it looks great, i’m testing it.
Quickly:
– the algorithm for Bitmap doesn’t handle the case the bitmap is not loaded yet
– your algorithm doesn’t handle filters as well
But anyway, very useful job
http://www.refactored.fr Tony

Hello again,

Just tested it..
Actually, it does”t work. At least for containers.
You compare to the width of children which is an undefined property as the width of the parent…
- olsn
  
  hi,
  
  i wrote this for an older version of EaselJS and have not tested or used it with the current version,
  it is possible that it might be not working correctly any more
- olsn
  
  I updated the snipped, it should work with the current version of easelJS now.
  It will also take rotation into account now.
  
  cheers
http://www.muhammadbinyusrat.com Muhammad

Apparently this does not work with DisplayObject or Shape.. right?
- olsn
  
  Yes, that is correct. Shapes are dynamic and it is currently not possible to get the width and hight of a Shape with a reasonable performance.
  Also I would suggest you to use this library: https://github.com/olsn/Collision-Detection-for-EaselJS it contains the getBounds()-method and is regularly updated and contains bugfixes

http://bla@bla.com moose

I like the collision detection (and all the other stuff!), but it might be a little too much calculations for some cases with simple shapes just to get the bounds?

Though maybe a bit sloppy, is there much harm in creating and saving an extra var like radius, width and height on a shape object like this:

var circle;

function init(){
circle = new createjs.Shape();
var radius = circle.radius  = Math.random()*20 + 20; 
circle.graphics.beginFill("olive").drawCircle(0, 0, radius);
}

function somewhereAlongTheLine(){
alert(circle.radius);
}

..and if you do a transform you'll have to update 'm manually...

circle.scaleX = 1.5;
circle.radius *=1.5;

var circle;

function init(){

circle = new createjs.Shape();

var radius = circle.radius = Math.random()*20 + 20;

circle.graphics.beginFill("olive").drawCircle(0, 0, radius);

function somewhereAlongTheLine(){

alert(circle.radius);

..and if you do a transform you'll have to update 'm manually...

circle.scaleX = 1.5;

circle.radius *=1.5;

Would that slow things down a lot or generate problems for cleaning up DisplayObjects?

Cheers! Michel

olsn

You can absolutely do that – the getBounds-method here does only work for Bitmaps and BitmapAnimations – so for Shapes it’s not that simple to get the bounds.