Get size of group KineticJS

Question

I have trouble in my kineticjs.

How can I get getHeight() and getWidht() from my group that contains two rectangle?

Here's my code:

var mygrup=new Kinetic.Group({
name:"mygrup",


draggable:true  
})

layer.draw()

var tool= new Kinetic.Rect({
       width: 50,
      height: 20,
      x:0,
      y:20,
      fill: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6),

      name:"image",

    });
var tool1= new Kinetic.Rect({
       width: 50,
      height: 20,
      x:0,
      y:0,
      fill: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6),

      name:"image",


    });
mygrup.add(tool1).add(tool)

Answer 1

  var children = mygrup.getChildren();
  var width = 0;
  for( var i=0; i< children.length; i++){
      if(children[i].getWidth() > width)
          width = children[i].getWidth(); 
  }

this gets the maximum width of any element, but the important part is the getting all children of the group and then iterating through them. You can sum the widths, or you can get all the x values and take the furthest left one and the furthest right one and make that your width. Or something else.

Answer 2

Perhaps a better approach is to just iterate through all of the children and find the minX, minY, and maxX and maxY by taking into account shape widths. The width and height of the group would then be:

var width = maxX - minX; var height = maxY - minY;

group.getWidth() and group.getHeight(), if implemented in the future, would take a similar approach.