CODEWITHSUNDEEP
htmlhtml5-canvaskineticjs
sein
sein

Reputation: 159

Get size of group KineticJS

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)

Upvotes: 3

Views: 2406

Answers (4)

Pic Mickael
Pic Mickael

Reputation: 1274

My solution takes in account elements that overlap as well as element with gaps between them (when they are not touching). It also returns the x/y location (because I needed it).

getGroupSize = function (pGroup) {
    var minX = Number.MAX_VALUE,
        maxX = 0,
        minY = Number.MAX_VALUE,
        maxY = 0;
    var children = pGroup.getChildren();
    if (children.length === 0) {
        minX = pGroup.getX();
        maxX = minX + pGroup.width();
        minY = pGroup.getY();
        maxY = minY + pGroup.height();
    }
    else {
        var groupX = pGroup.getX();
        var groupY = pGroup.getY();
        for (var i = 0; i < children.length; i++) {
            var size = this.getGroupSize(children[i]);
            size.minX += groupX;
            size.maxX += groupX;
            size.minY += groupY;
            size.maxY += groupY;
            if (size.minX < minX) {
                minX = size.minX;
            }
            if (size.maxX > maxX) {
                maxX = size.maxX;
            }
            if (size.minY < minY) {
                minY = size.minY;
            }
            if (size.maxY > maxY) {
                maxY = size.maxY;
            }
        }
    }
    return { minX: minX, maxX: maxX, minY: minY, maxY: maxY, width: maxX - minX, height: maxY - minY };
};

Upvotes: 0

tetris11
tetris11

Reputation: 817

Nested (recursive) solution to SoluableNonagon's implementation

function getMaxWidth(root_node){

   var min_x = Number.MAX_VALUE //window.innerWidth(),
       max_x = 0;


   var maxWidth = function recur(node){
       var children = node.getChildren();

       if (children.length === 0) 
           return node.getAbsoluteX();


       for(var i=0; i< children.length; i++){
           var pos = recur(children[i]);

           if (pos > max_x) max_x = pos;
           else if (pos < min_x) min_x = pos;
       }
   }

   return maxWidth(root_node);
}

Upvotes: 0

Eric Rowell
Eric Rowell

Reputation: 5219

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.

Upvotes: 1

SoluableNonagon
SoluableNonagon

Reputation: 11755

  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.

Upvotes: 3

Related Questions