洪水填充算法详解( 二 )

< 4; i++) {const nx = x + dx[i];const ny = y + dy[i];const key = `${nx},${ny}`;if (!isValid(nx, ny) || detectedSet.has(key) || obstacles.some(({ x, y }) => x === nx * size && y === ny * size)) {canExpand = false;continue;}queue.push({ x: nx, y: ny });detectedSet.add(key);detectedCount++;}if (canExpand) {detectedCount++;}}//重绘填充后的网格detectedSet.forEach(coords => {const [x, y] = coords.split(',').map(coord => parseInt(coord, 10));setTimeout(() =>{drawSquare(x * size, y * size, "lightblue");},500)});detectedCountDisplay.textContent = detectedCount;}//画网格function drawGrid() {for (let i = 0; i < gridSize; i++) {for (let j = 0; j < gridSize; j++) {drawSquare(i * size, j * size, "gray");ctx.strokeStyle = "lightgray";ctx.strokeRect(i * size, j * size, size, size);}}}//初始化drawGrid();totalSquaresDisplay.textContent = totalSquares;
3.2 效果
下面是,一张布满225W个网格的画布,执行的洪水填充算法:
四、应用
洪水填充算法应用很广泛,主要用于图像、游戏领取 。
4.1 图像填充
中的画图工具中的填充功能,其实就是使用洪水填充算法来实现的 。下面填充下咸蛋超人:
我们可以看到再填充咸蛋超人身体的时候,由于计时器是个封闭的圆形所以并没被填充为红色 。
4.2 区域分割
在计算机视觉领域,洪水填充算法也被用于图像的区域分割 。通过选择一个种子点,洪水填充算法可以将图像中与种子点相连通的相似区域标记出来,从而实现图像的自动分割 。
4.3 地图探索
在计算机游戏中,地图探索算法使用洪水填充来寻找从给定位置可到达的所有连通区域,如迷宫游戏或地图探索类游戏 。在生成随机地图时,应该避免生成角色无法到达的死路 。可以通过洪水填充算法来实现,比如下面这个游戏demo其中地图生成中就使用到了:
洪水填充算法可以用于生成迷宫 。在迷宫生成过程中,先随机选择一个种子点,并使用洪水填充算法填充整个迷宫,然后随机移除一些墙壁,最终生成具有迷宫结构的地图 。
4.4 区域选择
在图像编辑软件或地图编辑器中,洪水填充算法也可以用于区域选择 。用户可以通过选择一个种子点,然后用洪水填充算法将与种子点相连通的区域选中,便于后续的编辑操作 。
4.5 游戏地形生成
在游戏开发中,特别是策略游戏或沙盒游戏,洪水填充算法可用于生成游戏地图的地形 。通过选择几个种子点,然后使用洪水填充算法填充不同类型的地形,如平原、山地、河流等,可以实现多样化的游戏地图 。
4.6 色彩替换
洪水填充算法可以用于实现图片中的色彩替换 。用户可以选择一个种子点和目标颜色,然后使用洪水填充算法将所有与种子点相连通且颜色相近的区域替换成目标颜色 。
五、总结
【洪水填充算法详解】以上就是洪水填充算法全部的内容了,如果给你了提示、启发或者你感觉很有趣,请帮我点个赞吧!谢谢~