获取组 KineticJS 的大小答案

【问题标题】：Get size of group KineticJS获取组 KineticJS 的大小
【发布时间】：2013-02-26 00:23:22
【问题描述】：

我的 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)

【问题讨论】：

正如我在源代码中看到的那样，您无法以这种方式“mygrup.getWidth()”获得宽度。此代码始终返回 0。因此您应该手动计算值。
一个组可以有一个宽度，但你只是将它用作一个容器，所以没有宽度。

标签： html html5-canvas kineticjs

【解决方案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(); 
  }

这会获取任何元素的最大宽度，但重要的部分是获取组的所有子元素，然后遍历它们。您可以对宽度求和，或者您可以获取所有 x 值并取最左边的值和最右边的值，然后将其设为您的宽度。或者别的什么。

【讨论】：

这假设所有元素都整齐地对齐。元素重叠或之间有间隙怎么办？

【解决方案2】：

也许更好的方法是遍历所有子节点，并通过考虑形状宽度来找到 minX、minY 和 maxX 和 maxY。该组的宽度和高度将是：

var 宽度 = maxX - minX; 变量高度 = maxY - minY;

group.getWidth() 和 group.getHeight()，如果将来实施，将采取类似的方法。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我的解决方案考虑了重叠的元素以及它们之间有间隙的元素（当它们不接触时）。它还返回 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 };
};

【讨论】：