javascript - 如何使用javascript检查html5画布中的未占用空间？

Question

如何检查画布中的空白区域？

这里的想法是创建如下所示的地图：

目前我正在使用一种方法来循环置换父节点周围的子节点，如下所示：

function getCircularAngles(points) {
  return [...Array(points).keys()].map(
    (num) => num * ((Math.PI * 2) / points)
  );
}

function getCoorByAngle(
  origin,
  angle,
  radius
) {
  return {
    x: origin.x + Math.sin(angle) * radius,
    y: origin.y + Math.cos(angle) * radius,
  };
}

function getCircularCoords(
  origin,
  points,
  radius
) {
  return getCircularAngles(points).map((angle) =>
    getCoorByAngle(origin, angle, radius)
  );
}

但是上面的方法并不是那么好。＆我想要一种更有效的方法来做到这一点，以便更多地保留空间，并且节点感觉它们是以网格状方式而不是圆形方式排列的。

所以新的想法是

1. 以最小距离检查最近的空白空间。
2. 以不会与其他节点重叠的方式放置子节点。
3. 继续所有节点和子节点的过程。

有人可以为此建议一个实现吗？

我尝试 过的尝试将整个画布转换为小单元格，然后将每个节点分配给每个单元格 && 将单元格的状态更新为已占用（这样不会发生重叠），并继续为其余节点执行此操作。但是这种方法效率不高，因为它在计算上非常昂贵（因为我必须遍历所有单元格，找到最近的未占用然后将节点分配给该单元格）&& 需要花费大量时间来分配位置应用程序初始化。

另一个想法是检查画布中占用的像素。像这样

var ctx = yourCanvas.getContext(); 
var pixelData = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height);

在上面pixelData.data将是一个Uint8ClampedArray(16000000).

但随后还要检查空/未占用的空间将不得不循环并且计算成本很高

标签： javascript