在javascript中计算网格的坐标？

Question

如果我有一个3×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×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);