javascript - 在javascript中计算网格的坐标？

Question

如果我有一个 3 x 3 的 50 个像素正方形的网格，水平编号为 1-9，如下所示；

| 1 | 2 | 3 |

| 4 | 5 | 6 |

| 7 | 8 | 9 |

如果我知道正方形的编号，例如正方形 9，并且在此实例中正方形的宽度为 50 像素，我如何以 0、0 的坐标系以编程方式计算正方形的坐标从左上角开始。

在这种情况下，正方形 9 是x = 100和y = 100，

到目前为止我已经尝试过了，但它失败了，

x = (squareNumber * squareWidth)
y = (squareNumber * squareHeight)

Answer 1

一般公式为：

x = (squareNumber - 1) % numberOfSquaresPerRow * squareWidth
y = (squareNumber - 1) / numberOfSquaresPerCol * squareHeight

在您的情况下，由于它是 3 x 3 网格，因此它将是：

x = (squareNumber - 1) % 3 * squareWidth
y = (squareNumber - 1) / 3 * squareHeight

在不使用整数除法的 Javascript 中，您必须使用以下内容y：

y = Math.floor((squareNumber - 1) / 3) * squareHeight

Answer 2

var width=50,height=50;
 function gridPos(n){
      var pos={};
      pos.x=(n -1)%3*width;
      pos.y=Math.floor((n-1)/3)*height;
      return pos;
 }
pos=gridPos(8);
console.log("pos is " + pos.x + " " + pos.y);