前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一天一大 lee(图像渲染)难度:简单-Day20200816

一天一大 lee(图像渲染)难度:简单-Day20200816

作者头像
前端小书童
发布2020-09-24 14:27:56
3700
发布2020-09-24 14:27:56
举报
文章被收录于专栏:前端小书童
题目:[1]

有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 0 到 65535 之间。

给你一个坐标 (sr, sc) 表示图像渲染开始的像素值(行 ,列)和一个新的颜色值 newColor,让你重新上色这幅图像。

为了完成上色工作,从初始坐标开始,记录初始坐标的上下左右四个方向上像素值与初始坐标相同的相连像素点,接着再记录这四个方向上符合条件的像素点与他们对应四个方向上像素值与初始坐标相同的相连像素点,……,重复该过程。将所有有记录的像素点的颜色值改为新的颜色值。

最后返回经过上色渲染后的图像。

示例

代码语言:javascript
复制
输入:
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]内。

抛砖引玉

抛砖引玉

深度优先搜索(DFS)

思路

  • 矩阵遍历
  • 给你一个位置,将与其直接、间接相连的位置填充指定值 newColor
  • 递归:给定一个个坐标,满足:
    • 在 image 中且与给定点直接间接相连 不相连:被非指定坐标颜色包围,则通过指定坐标x,y轴上的递增递减且颜色等于指定元素的判断条件达到不了的坐标
    • 与指定点颜色相同 则填充指定值 newColor,否则返回

特殊情况

  • 给定颜色与给定坐标颜色相同,直接返回
  • 矩阵为空返回[]
代码语言:javascript
复制
/**
 * @param {number[][]} image
 * @param {number} sr
 * @param {number} sc
 * @param {number} newColor
 * @return {number[][]}
 */
var floodFill = function (image, sr, sc, newColor) {
  let m = image.length,
    n = image[0] ? image[0].length : 0
  if (m === 0 || n === 0) return []
  if (image[sr][sc] !== newColor) {
    fillNUmm(sr, sc, image[sr][sc])
  }
  return image

  function fillNUmm(x, y, old) {
    // 越界
    if (x < 0 || y < 0 || x >= m || y >= n) return
    // 如果不为0且不等于newColor
    if (image[x][y] === old) {
      image[x][y] = newColor
      // 左
      fillNUmm(x - 1, y)
      // 右
      fillNUmm(x + 1, y)
      // 上
      fillNUmm(x, y - 1)
      // 下
      fillNUmm(x, y + 1)
    }
  }
}

广度优先搜索(BFS)

  • 深度搜索和广度搜索的逻辑基本使用一样的,就是通过指定坐标向外扩展满足条件就更新颜色
  • 他们之间的区别就是实现逻辑的区间
  1. 深度搜索
  • 通过递归遍历原矩阵,根据参数(x,y)来一遍遍从指定坐标向外扩展
  1. 广度搜索
  • 遇到满足条件的元素就存储
  • 出来存储元素坐标,出来完就从数值中删除,知道没有满足条件的元素
代码语言:javascript
复制
/**
 * @param {number[][]} image
 * @param {number} sr
 * @param {number} sc
 * @param {number} newColor
 * @return {number[][]}
 */
var floodFill = function (image, sr, sc, newColor) {
  let m = image.length,
      n = image[0] ? image[0].length : 0,
      old = image[sr][sc],
      queue = [[sr, sc]];
  if (m === 0 || n === 0) return []
  if (old !== newColor) {
    while (queue.length) {
      const [i, j] = queue.shift();
      image[i][j] = newColor;
      // 满足坐标递增递减可到达且不越界,且到达的元素都与指定颜色相同
      if (i - 1 >= 0 && image[i - 1][j] === old) queue.push([i - 1, j]);
      if (i + 1 < m && image[i + 1][j] === old) queue.push([i + 1, j]);
      if (j - 1 >= 0 && image[i][j - 1] === old) queue.push([i, j - 1]);
      if (j + 1 < n && image[i][j + 1] === old) queue.push([i, j + 1]);
    }
  }
  return image;
}

参考资料

[1]

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-08-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端小书童 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 示例
  • 注意
  • 抛砖引玉
    • 深度优先搜索(DFS)
      • 广度优先搜索(BFS)
        • 参考资料
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档