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

Question

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

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

我猜测实现它的方式是：

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

• 绘制和拖动绿色矩形（让我们称之为节点）：我将使用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可以直接用于设置图块的位置。

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

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＆gt; = 0＆amp;＆amp; xIndex＆lt; columns等）