[leetcode]图像渲染[javascript]

https://leetcode-cn.com/problems/flood-fill/

描述

有一幅以二维整数数组表示的图画，每一个整数表示该图画的像素值大小，数值在 0 到 65535 之间。
给你一个坐标 (sr, sc) 表示图像渲染开始的像素值（行 ，列）和一个新的颜色值 newColor，让你重新上色这幅图像。
为了完成上色工作，从初始坐标开始，记录初始坐标的上下左右四个方向上像素值与初始坐标相同的相连像素点，接着再记录这四个方向上符合条件的像素点与他们对应四个方向上像素值与初始坐标相同的相连像素点，……，重复该过程。将所有有记录的像素点的颜色值改为新的颜色值。
最后返回经过上色渲染后的图像。
示例 1:
输入:

image = [[1,1,1],[1,1,0],[1,0,1]]
sr = 1, sc = 1, newColor = 2
输出: [[2,2,2],[2,2,0],[2,0,1]]

解析: 
在图像的正中间，(坐标(sr,sc)=(1,1)),
在路径上所有符合条件的像素点的颜色都被更改成2。
注意，右下角的像素没有更改为2，
因为它不是在上下左右四个方向上与初始点相连的像素点。

注意:

• image 和 image[0] 的长度在范围 [1, 50] 内。
• 给出的初始点将满足 0 <= sr < image.length 和 0 <= sc < image[0].length。
• image[i][j] 和 newColor 表示的颜色值在范围 [0, 65535]内。

分析

看完题目我不知道它在讲个啥

然后反复在纸上画了，英文中文都看了几遍。总算是明白了。

这不就是填充颜色么！就Windows自带画图的那个油漆桶工具类似的功能！

理解题意接下来就是怎么做了。其实题目说明已经暴露了一部分算法：

1. 首先得找到这个坐标，将它颜色变为newColor。
2. 再看看它上下左右四个方向，是不是有一样的颜色，有的话也变成newColor
3. 重复第二步
4. 直到最后整个图像就填充好了

这里我一开始先把目标坐标的值用一个变量oldColor保存了下来，写了一个函数来判断上下左右进行递归，判断并修改image，调用结束后直接return 修改后的image。

顺便去搜了一下，这种方法叫深度优先搜索

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。沿着树的深度遍历树的节点，尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。属于盲目搜索。

var floodFill = function(image, sr, sc, newColor) {
  let oldColor = image[sr][sc], width = image.length, height = image[0].length
  if (oldColor === newColor) return image
  dfs(image, sr, sc, newColor)
  return image

  function dfs (image, sr, sc, newColor) {
    image[sr][sc] = newColor
    if (sr + 1 < width && image[sr + 1][sc] === oldColor) {
      dfs(image, sr + 1, sc, newColor)
    }
    if (sr > 0 && image[sr - 1][sc] === oldColor) {
      dfs(image, sr - 1, sc, newColor)
    }
    if (sc + 1 < height && image[sr][sc + 1] === oldColor) {
      dfs(image, sr, sc + 1, newColor)
    }
    if (sc > 0 && image[sr][sc - 1] === oldColor) {
      dfs(image, sr, sc - 1, newColor)
    }
  }
};

参考资料

https://zh.wikipedia.org/wiki/深度优先搜索