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

Question

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

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

我猜的实现方式是：

• 绘制蓝色画布：获取页面高度和宽度并减去灰色区域
• 将画布划分为等尺寸的矩形，这样当我将其中一个绿色矩形拖放到其中时，它就会与网格对齐：这里不知道

• 绘制和拖动绿色矩形（我们称它们为节点）：我将使用appendTo() 为每个矩形添加一个Div，并使用jQuery UI 来拖动它们。这已经完成了。这是一个例子：http://myownlibrary.altervista.org/es4/

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

Answer 1

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

你首先需要确定的是如何你想划分空间：

1. 按固定数量的列和行
2. 按预定义的平铺宽度和高度。

对于后者，您可能希望将大小调整为最接近的大小，但为了简单起见，请坚持第一种方法。

DEMO

假设您想要固定数量的图块：

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可以直接用来设置一个tile的位置。

如果你想“捕捉”你需要使用相对于画布的鼠标位置的图块：

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