Question

我有一张2x3的桌子，我已经添加到EaselJS了...目前我正在构建它：

for (var i = 0; i < 6; i++) {
    if(i == 1 || i == 3 || i == 5) {
       var xPos = playersBoxW;
    } else { 
       var xPos = 0;
    }
    if(i == 2 || i == 3) { 
       var yPos = playersBoxH;
    } else if (i == 4|| i == 5) { 
       var yPos = playersBoxH*2;
    } else { 
       var yPos = 0;
    }
    playerBox[i] = new createjs.Container().set({x: xPos, y: yPos});
}

这似乎是一种非常低效的方式，如果表增长则没有用。其他人有想法简化这个吗？

Answer 1

查看您的代码我认为这个算法基本上归结为：

xPos似乎等于i（按表格宽度）乘以playersBoxW的整数除法。例如，如果i = 3且宽度为2，那么xPos等于playersBoxW乘以3/2的整数，即{1}。

yPos似乎等于i（按表格高度）乘以playersBoxH的整数除法。例如，如果i = 4和高度= 3，那么yPos等于playersBoxH乘以4/3的整数，即{1}。

function integerDivision(a, b) {
    return Math.floor(a / b);
}

function makeTable(width, height, player, arr) {
     var xPos, yPos, size = width*height;
     for (var i = 0; i < size; i++) {
          xPos = player.boxW  * integerDivision(i, width);
          yPos = player.boxH  * integerDivision(i, height);
          arr[i] = new createjs.Container().set({x: xPos, y: yPos});
     }
     return arr;
}

整数除法就像常规除法一样，但你把剩余的除掉了。所以在这种情况下我们将数字向下舍入： 3/2 = 1.5 =＆gt; floor结果（向下舍入）=＆gt; 1

边节点： EaslJS容器有时会很昂贵，所以要小心它们。

容器有一些开销，因此通常不应该创建容器来容纳单个子容器。 [easljs doc]

Answer 2

如果你只是想做行/列数学，那么有一种更简单的方法。

以下是您的原始示例（包含一些使其可用的代码）http://jsfiddle.net/u3ds24y5/

您可以使用简单的等式推导出列和行。这使您可以轻松更改列数和总计数。

<svg width="200" height="150">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000;" />
    </marker>
  </defs>
  <path d='M0,0 L50,50 L100, 100' style='marker-mid:url(#markerArrow); stroke: #000'/>
  <path d='M100,100 L125, 100 L150, 100' style='marker-mid:url(#markerArrow); stroke: #000' />
</svg>

这是一个更新的小提琴：http://jsfiddle.net/u3ds24y5/1/

简化代码：

var column = i % num_columns;
var row = Math.floor(i / num_columns);
var x = column * column_width;
var y = row * row_height;

简化EaselJs中的表格代码

2 个答案: