图像渲染

精选原创

掘金安东尼 2022-10-07 21:00:51 ©著作权

文章标签 像素点搜索树数据结构 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者掘金安东尼的原创作品，请联系作者获取转载授权，否则将追究法律责任

LeetCode 75 学习计划适用于想为技术面试做准备但不确定应该聚焦于哪些题目的用户。学习计划中的题目都是经过精心挑选的，Level 1和 Level 2 学习计划是为初级用户和中级用户准备的，题目覆盖了大多数中层公司面试时所必需的数据结构和算法，Level 3 学习计划则是为准备面试顶级公司的用户准备的。来源

第 7 天

图像渲染

难度：简单

题目

有一幅以 m x n 的二维整数数组表示的图画 image ，其中 image[i][j] 表示该图画的像素值大小。

你也被给予三个整数 sr , sc 和 newColor 。你应该从像素 image[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，因为它不是在上下左右四个方向上与初始点相连的像素点。

题解

按照题意，上下左右符合条件的都要染色

满足以下条件不进行染色：

触碰边界
当前颜色和初始颜色不同
当前颜色和期望颜色相同（说明已经被染过了）

var floodFill = function(image, sr, sc, color) {
    const initColor = image[sr][sc]
    function dfs(sr,sc){
        if(image[sr]===undefined || image[sr][sc] === undefined || image[sr][sc]!==initColor || image[sr][sc]===color) return
        image[sr][sc] = color
        dfs(sr+1,sc)
        dfs(sr-1,sc)
        dfs(sr,sc+1)
        dfs(sr,sc-1)
    }
    dfs(sr,sc)
    return image
};