获取组的大小KineticJS

我在我的kineticjs中遇到了麻烦。获取组的大小KineticJS

如何从包含两个矩形的我的组中获得getHeight()和getWidht()？

这里是我的代码：

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)

来源

2013-03-10 sein

正如我在源看看你能不能用这种方式 “mygrup.getWidth（）” 获得宽度。此代码始终返回0.因此，您应该手动计算值。 – lavrton 2013-03-11 08:10:45

一个组可以有一个宽度，但你只是将它用作一个容器，所以没有宽度。 – SoluableNonagon 2013-03-11 13:29:41

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

这得到任何元素的最大宽度，但重要的部分是获得该组的所有儿童，然后通过他们的迭代。你可以将宽度相加，或者你可以得到所有的x值，并选取最左边的一个和最右边的一个，然后确定你的宽度。或者是其他东西。

来源

2013-03-11 13:34:17 SoluableNonagon

这不适用于嵌套组 – Murtnowski 2013-07-18 22:18:31

并假定所有元素都整齐排列。元素重叠或者它们之间存在差距？ – 2016-02-29 14:05:43

也许更好的方法是迭代所有的孩子，并通过考虑形状宽度来找到minX，minY，maxX和maxY。该组的宽度和高度将为：

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

group.getWidth（）和group.getHeight（），如果将来会实现，将采用类似的方法。

来源

2013-03-15 19:49:13

嵌套（递归）溶液到SoluableNonagon的实现

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); 
}

来源

2015-02-20 14:31:44 tetris11

我的解决方案发生在重叠的以及与它们之间的间隙元件帐户元件（当它们不接触）。它还返回x/y位置（因为我需要它）。

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 }; 
 
};

来源

2016-02-29 14:11:08

获取组的大小KineticJS

回答

相关问题