在 EaselJs 中简化 table 代码

Question

我有一个 2x3 table，我正在添加到 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});
}

这似乎是一种非常低效的方法，如果 table 增长，它就没有用了。还有其他人有简化这个的想法吗？

Answer 1

看看你的代码，我认为这个算法本质上是它归结为：

xPos 似乎等于 i（乘以 table 宽度）乘以 playersBoxW 的整数除法。例如，如果 i = 3 且宽度为 2，则 xPos 等于 playersBoxW 乘以 3/2 的整数除法，即 1.

yPos 似乎等于 i（乘以 table 高度）乘以 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 => floor 结果（向下舍入）=> 1

侧节点： EaslJS 容器有时可能很昂贵，所以要小心使用它们。

Containers have some overhead, so you generally shouldn't create a Container to hold a single child. [easljs doc]

Answer 2

如果您只是想做 row/column 数学运算，有一种更简单的方法。

这是您的原始示例（使用一些代码使其工作）http://jsfiddle.net/u3ds24y5/

你可以用一个简单的方程推导出列和行。这使您可以轻松更改列数和总计数。

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

这是更新后的 fiddle：http://jsfiddle.net/u3ds24y5/1/

简化代码：

var cols = 2, total = 6; // Change these
for (var i = 0; i < total; i++) {
    var xPos = i % cols * playersBoxW,
        yPos = Math.floor(i/cols) * playersBoxH;
    // Create container, etc
}

在 EaselJs 中简化 table 代码

Simplify table code in EaselJs

javascript

for-loop

easeljs