getBounds() returns the same as getTransformedBounds() on a Shape() which has been scaled

Question

I'm having an issue with obj.getTransformedBounds() of a Shape().

The getBounds() method should return a rectangle (if it was set using setBounds()) which stores the x/y/w/h of the Shape() within its OWN coordinate space - it's real width & height with no transformations applied.

The getTransformedBounds() method should return a rectangle (again, if set by using setBounds()) which stores the x/y/w/y within its PARENT'S coordinate space - the shape's width & height with transformations applied.

Instead, I see getBounds() returning only the transformed bounds of a shape that has its scaleX and/or scaleY applied: http://jsfiddle.net/W9Tb8/1/

var shape = new createjs.Shape();
shape.graphics = new createjs.Graphics().beginFill("#f00").drawRect(0,0,100,100);
shape.setBounds(0,0,100,100);
shape.scaleX = shape.scaleY = 0.5;

console.log(shape.getBounds(), shape.getTransformedBounds()); // returns [0, 0, 50, 50], [0, 0, 50, 50]

// shape.getBounds() should return [0, 0, 100, 100]
// shape.getTransformedBounds() should return [0, 0, 50, 50}

Am I missing something?

Answer 1

It looks like what's happen is EaselJS is reusing some rectangle instances to help reduce memory impact. Have a look at the documentation here for more about it:

http://createjs.com/Docs/EaselJS/classes/Shape.html#method_getBounds

If you want to force it to give you the originally set bounds you'll either need to clone or copy them. I've altered your example to show how to output the original bounds using cloning.

http://jsfiddle.net/W9Tb8/2/

console.log(shape.getBounds().clone(), shape.getTransformedBounds());