Question

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

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

这将获得任何元素的最大宽度，但重要的部分是获取组中的所有子元素然后迭代它们。你可以对宽度求和，或者你可以得到所有的x值，然后选择最左边的一个，最右边的一个，并将它作为你的宽度。或者别的什么。

Answer 2

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

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

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

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

Answer 4

我的解决方案考虑了重叠的元素以及它们之间有间隙的元素（当它们没有接触时）。它还返回x / y位置（因为我需要它）。

＆＃13;

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

＆＃13;

获取KineticJS组的大小

4 个答案: