Javascript 将画布分成相同宽度和高度的空间

我想有一个画布，涵盖整个页面（除了顶部区域和左侧区域），如下图所示（蓝色区域）

我想把画布分成正方形/矩形（黄线），每个正方形/矩形具有相同的高度和宽度，这样我就可以在网格中添加一些固定大小的矩形（绿色矩形）。嗯，类似于Windows7桌面网格（或Windows8Metro），其中图标与网格对齐

我猜实现它的方式是：

• 绘制蓝色画布：获取页面高度和宽度，并减去灰色区域
• 将画布分成相等尺寸的矩形，这样当我拖放其中一个绿色矩形时，它就会与网格对齐：不知道
• 绘制和拖动绿色矩形（我们称之为节点）：我将使用

  appendTo（）

  为每个矩形添加一个Div，并使用jqueryui拖动它们。这项工作已经完成。以下是一个例子：

• 我将采取的另一个步骤是使画布区域可扩展，也就是说，当所有矩形都包含某个节点时，我希望画布在宽度/高度上“增长”（将使用水平和垂直滚动条滚动）

将画布分成相同宽度和高度的空间

您需要确定的第一件事是如何划分空间：

通过固定数量的列和行

按预定义的瓷砖宽度和高度

对于后者，您可能希望将大小调整到最接近的大小，但为了保持简单，让我们坚持第一种方法

假设您想要固定数量的瓷砖：

var columns = 6,
    rows    = 4;

然后，每个瓷砖的大小为：

var tileWidth  = canvas.width / columns,
    tileHeight = canvas.height / rows;

这个数字可能是浮点数，也可能不是浮点数。如果只需要整数值，只需将其四舍五入即可：

var tileWidth  = Math.round(canvas.width / columns),
    tileHeight = Math.round(canvas.height / rows);

现在，您可以使用索引来确定每个磁贴的位置：

var x = xIndex * tileWidth,
    y = yIndex * tileHeight;

此x和y可直接用于设置平铺的位置

如果要“捕捉”瓷砖，需要使用鼠标相对于画布的位置：

canvas.onmousemove = function(e) {

    /// adjust mouse position to be relative to canvas
    var rect = canvas.getBoundingClientRect(),
        mx = e.clientX - rect.left,
        my = e.clientY - rect.top,

        /// get index from mouse position
        xIndex = Math.round(mx / tileWidth),
        yIndex = Math.round(my / tileHeight);

    /// calculate x and y based on previous formula
}

您可能希望从瓷砖的中心而不是墙角捕捉。只需从鼠标位置减去瓷砖宽度和高度的一半即可

xIndex = Math.round((mx - tileWidth * 0.5) / tileWidth);
yIndex = Math.round((my - tileHeight * 0.5) / tileHeight);

---

您可能需要检查索引边界（xIndex>=0&&xIndex这是一个很好的解决方案，但不适用于此问题。正如您的演示所显示的，这些瓷砖不会以“相同宽度和高度的空间”结束。