洪水填充算法详解

﹏ヽ暗。殇╰゛Y 2024-04-23 12:58 77阅读 0赞

>  *  ?**作** **者**：[是江迪呀][Link 1]
>  *  ✒️**本文关键词**：`算法`、`前端`、`JavaScript`、`HTML`、`洪水填充算法`
>  *  ☀️**每日 一言**：`不以物喜，不以己悲`

#### 文章目录 ####

*  一、前言
 *  二、思路
 *   *  2.1 起点
     *  2.2 检查起点四周
     *  2.3 填充相邻点
     *  2.4 继续扩散
     *  2.7 结束
 *  三、实现
 *   *  3.1 HTML + JavaScript代码
     *  3.2 效果
 *  四、应用
 *   *  4.1 图像填充
     *  4.2 区域分割
     *  4.3 地图探索
     *  4.4 区域选择
     *  4.5 游戏地形生成
     *  4.6 色彩替换
 *  五、总结

![在这里插入图片描述][2027c7208a7145e68922edf0f226c13c.png_pic_center]

效果：  
![在这里插入图片描述][53e02f667e794ed5879874654d48cdb3.gif_pic_center]

## 一、前言 ##

当象一个`容器`中注水时，无论容器的结构如何复杂，注入的水总是能够绕过`障碍物`填满整个区域。有一种算法叫做`洪水填充`算法，它是一种`图像处理算法`，用于`填充封闭区域`。它的工作原理类似于在图像上泼洒颜料，使一个种子像水流一样蔓延，填充连通的区域，直到遇到边界或其他障碍物为止。我们可以将洪水填充算法比喻为在涂色本上填色的过程。假设我们有一个空白的涂色本，上面有很多小格子，每个格子可以涂上不同的颜色。现在，我们想要将某个格子以及和它相连通的所有相同颜色的格子都涂上另一种颜色。非常有趣，下面让我们来一起学习一下洪水填充算法的原理。

## 二、思路 ##

**红色：** 起点。  
**绿色：** 可到达的点。  
**黑色：** 障碍物。

![在这里插入图片描述][bf8043cbe3d5465aa4022887af58409f.png]

### 2.1 起点 ###

这个`起点`我们可以理解为`出水口`，扩散的起点。一般都选择`中心点`作为`起点`。  
![在这里插入图片描述][e93d8bfeeae34ab183ca3653f753d3da.png]

### 2.2 检查起点四周 ###

检查`起点`的 `上` `下` `左` `右`四个方向是否存在`障碍物`。如果不是障碍物，则为`绿色(表示可到达的点)`并存入`待检查队列`中，如果存在`障碍物`，颜色不变，不存入`待检查队列`。  
![在这里插入图片描述][996089c45ae6434a97ca648cc7c53de2.png]

### 2.3 填充相邻点 ###

将`待检查队列`中的点，填充为`红色`，并检查它的四周是否存在`可到达`的点：

![在这里插入图片描述][d2ee067c702b414c8f1ce80c35737798.png]

### 2.4 继续扩散 ###

循环`2.2`、 `2.3` 步骤继续检查扩散。  
![在这里插入图片描述][be773260e1be444ba974623e9c28fcd3.png]

### 2.7 结束 ###

当`待检查队列`中没有节点时，证明已经`检查`并`扩散`完毕了。  
![在这里插入图片描述][1e44401a457749f9809e66eb14ebce94.png]  
图中的两个白色的节点，是不可到达的点。

## 三、实现 ##

为了更加直观看到`洪水填充`算法的执行过程，我们使用`JavaScript`和`HTML`来实现。完整代码如下：

### 3.1 HTML + JavaScript代码 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Canvas Grid with Obstacles</title>
        <style>
            body {
          
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }
            canvas {
          
                border: 1px solid black;
            }
            #showTable {
          
                width: 200px;
                height: 150px;
                border: 1px solid black;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    <canvas id="gridCanvas" width="1500" height="1500"></canvas>
    <div id="showTable">
        <div>总数量: <span id="totalSquares">2,250,000</span></div>
        <div>障碍物数量: <span id="obstacleCount">0</span></div>
        <button onclick="randomObstruction()">生成障碍物</button>
        <button onclick="startDetect()">开始探测</button>
    </div>
    <script>
        const canvas = document.getElementById("gridCanvas");
        const ctx = canvas.getContext("2d");
        const size = 10;//网格大小
        const gridSize = 150; // 网格数量
        const totalSquares = gridSize * gridSize;
        const centerPoint = {
           x: Math.floor(gridSize / 2), y: Math.floor(gridSize / 2) };
        const totalSquaresDisplay = document.getElementById("totalSquares");
        const obstacleCountDisplay = document.getElementById("obstacleCount");
        const detectedCountDisplay = document.getElementById("detectedCount");
        let obstacles = [];
        function drawSquare(x, y, color) {
          
            ctx.fillStyle = color;
            ctx.fillRect(x, y, size, size);
        }
        //随机生成障碍物
        function randomObstruction() {
          
            obstacles = [];
            //先清空之前生成的障碍物
            ctx.clearRect(0, 0, canvas.width, canvas.height); 
            drawGrid(); // Redraw the grid lines
            const obstacleCount = Math.floor(Math.random() * 301) + 10000;
            for (let i = 0; i < obstacleCount; i++) {
          
                const x = Math.floor(Math.random() * gridSize) * size;
                const y = Math.floor(Math.random() * gridSize) * size;
                obstacles.push({
           x, y });
                drawSquare(x, y, "black");
            }
            obstacleCountDisplay.textContent = obstacleCount;
        }
        //洪水填充
        function startDetect() {
          
            const detectedSet = new Set();
            const queue = [];
            const dx = [0, 1, 0, -1];
            const dy = [-1, 0, 1, 0];
            let detectedCount = 0;
            function isValid(x, y) {
          
                return x >= 0 && x < gridSize && y >= 0 && y < gridSize;
            }
            queue.push(centerPoint);
            detectedSet.add(`${ centerPoint.x},${ centerPoint.y}`);
            while (queue.length > 0) {
          
                const {
           x, y } = queue.shift();
                let canExpand = true;
                //上下左右四个方向
                for (let i = 0; i < 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;
    </script>
    </body>
    </html>

### 3.2 效果 ###

下面是，一张布满`225W`个网格的画布，执行的`洪水填充算法`：  
![在这里插入图片描述][f7841a125a414364ab39813f8b859623.gif_pic_center]

## 四、应用 ##

洪水填充算法应用很广泛，主要用于`图像`、`游戏`领取。

### 4.1 图像填充 ###

windows中的画图工具中的填充功能，其实就是使用`洪水填充算法`来实现的。下面填充下咸蛋超人：

![在这里插入图片描述][797c301b8e0d4fef8fe6002be4785e1f.gif_pic_center]  
我们可以看到再填充`咸蛋超人`身体的时候，由于`计时器`是个封闭的`圆形`所以并没被填充为红色。

### 4.2 区域分割 ###

在计算机视觉领域，洪水填充算法也被用于图像的区域分割。通过选择一个种子点，洪水填充算法可以将图像中与种子点相连通的相似区域标记出来，从而实现图像的自动分割。

### 4.3 地图探索 ###

在计算机游戏中，地图探索算法使用洪水填充来寻找从给定位置可到达的所有连通区域，如迷宫游戏或地图探索类游戏。在生成随机地图时，应该避免生成`角色`无法到达的`死路`。可以通过`洪水填充算法`来实现，比如下面这个游戏demo其中地图生成中就使用到了：  
![在这里插入图片描述][4c277a35bcbf42fba16f05dc3e9cc7ce.gif_pic_center]

洪水填充算法可以用于生成迷宫。在迷宫生成过程中，先随机选择一个种子点，并使用洪水填充算法填充整个迷宫，然后随机移除一些墙壁，最终生成具有迷宫结构的地图。

### 4.4 区域选择 ###

在图像编辑软件或地图编辑器中，洪水填充算法也可以用于区域选择。用户可以通过选择一个种子点，然后用洪水填充算法将与种子点相连通的区域选中，便于后续的编辑操作。

### 4.5 游戏地形生成 ###

在游戏开发中，特别是策略游戏或沙盒游戏，洪水填充算法可用于生成游戏地图的地形。通过选择几个种子点，然后使用洪水填充算法填充不同类型的地形，如平原、山地、河流等，可以实现多样化的游戏地图。

### 4.6 色彩替换 ###

洪水填充算法可以用于实现图片中的色彩替换。用户可以选择一个种子点和目标颜色，然后使用洪水填充算法将所有与种子点相连通且颜色相近的区域替换成目标颜色。

## 五、总结 ##

以上就是`洪水填充算法`全部的内容了，如果给你了提示、启发或者你感觉很有趣，请帮我点个赞吧！谢谢~

[Link 1]: https://blog.csdn.net/qq_42785250?spm=1011.2124.3001.5343
[2027c7208a7145e68922edf0f226c13c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f59bedba0af24ae4a7f96dfd8d8d3f24.png
[53e02f667e794ed5879874654d48cdb3.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9ccac7d544044f549e1404009a91246d.gif
[bf8043cbe3d5465aa4022887af58409f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b6815db3d09e43b0b1acbe870ee33203.png
[e93d8bfeeae34ab183ca3653f753d3da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/be4a6db78d194e3bb5521299be119d46.png
[996089c45ae6434a97ca648cc7c53de2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5f350409501d4acfa78f2c36c98dbf13.png
[d2ee067c702b414c8f1ce80c35737798.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6000848d22394f1e9a0a6974166930a5.png
[be773260e1be444ba974623e9c28fcd3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f5812a71fd2646ea9eac6f616af387fe.png
[1e44401a457749f9809e66eb14ebce94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5269545bc382476a8cd0767ad60bf0b6.png
[f7841a125a414364ab39813f8b859623.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c8602e50f22946fca7b88f43953e87f7.gif
[797c301b8e0d4fef8fe6002be4785e1f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/eb2f950583ae42d48ec1fce0acd80b9b.gif
[4c277a35bcbf42fba16f05dc3e9cc7ce.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9ff1c812531d4135bb6dc46a54dfa893.gif