LeetCode 733——图像渲染(使用JavaScript语言)|刷题打卡

简介: LeetCode 733——图像渲染(使用JavaScript语言)|刷题打卡

前言

掘金团队号上线,助你 Offer 临门! 点击 查看详情

题目描述

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

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

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

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

image.png

方法:(DFS深度优先搜索)

思路:使用递归,递归的结束条件是关键,核心思路是考虑全面边界条件,当上下左右任意一个点超出边界时,或者坐标对应的点和初始坐标对应的颜色不同则返回。

// 解决本题的核心思路是考虑全面边界条件,当上下左右的点超出边界的时候,或者
// 坐标对应的点 和初始坐标对应的颜色不同则返回。
var floodFill = function (image, sr, sc, newColor) {
    // 记录image的长度  相当于二维矩阵由多少行
    let m = image.length;
    // 记录二维矩阵由多少列
    let n = image[0].length;
    // 记录起始点的颜色值
    let orignalColor = image[sr][sc];
    // 如果起始点的颜色等于新的颜色,则直接返回二位矩阵
    if(image[sr][sc] == newColor) {
        return image;
    }
    // 开始染色的函数
    const fill = (i,j) => {
        if(i < 0 || j < 0 || i == m || j == n ||image[i][j] != orignalColor) {
            return;
        }
        image[i][j] = newColor;
        // 起始点上边的点
        fill(i-1,j);
        // 起始点下边的点
        fill(i+1,j);
        // 起始点左边的点
        fill(i,j-1);
        // 起始点右边的点
        fill(i,j+1);
    }
    // 调用函数
    fill(sr,sc);
    return image;
};

伪代码

function imageFill(image,sr,sc,newColor):
  // 记录image的长度,相当于二维矩阵的长度
  m ← image.length;
  // 记录二维矩阵列的长度
  n ← image[0].length;
  // 记录起始点的颜色值
  orignalColor ← image[sr][sc];
  // 如果起始点的颜色和newColor的值相同,直接返回二维矩阵image
  if image[sr][sc] == newColor:
    return image;
  // 图像渲染的函数
  function fill(i,j):
    // 递归的结束条件:如果坐标出界或者目标元素的像素值和起始点颜色值不同则返回。
    if (i < 0 || j < 0 || i == m || j == n ||image[i][j] != orignalColor):
      return;
    // 将第i行第j列的值修改为新的像素值
    image[i][j] = newColor;
    // 分别将上下左右四个点的坐标代入递归函数
    fill(i-1,j);
    fill(i+1,j);
    fill(i,j-1);
    fill(i,j+1);
  // 调用图像渲染函数
  fill(sr,sc);
  // 返回渲染后的图像
  return image;

算法复杂度分析

  • 时间复杂度:O(n)
  • 空间复杂度:O(n)

执行结果

image.png

相关文章
|
1月前
|
搜索推荐 索引 Python
【Leetcode刷题Python】牛客. 数组中未出现的最小正整数
本文介绍了牛客网题目"数组中未出现的最小正整数"的解法,提供了一种满足O(n)时间复杂度和O(1)空间复杂度要求的原地排序算法,并给出了Python实现代码。
68 2
|
25天前
|
JavaScript
js渲染乘法表
js渲染乘法表
23 1
|
28天前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
38 1
|
1月前
|
存储 算法
LeetCode第48题旋转图像
LeetCode第48题"旋转图像"的解题方法,通过两次翻转操作——先水平翻转再对角线翻转,实现了原地旋转矩阵的效果。
LeetCode第48题旋转图像
|
1月前
|
算法 Python
【Leetcode刷题Python】 LeetCode 2038. 如果相邻两个颜色均相同则删除当前颜色
本文介绍了LeetCode 2038题的解法,题目要求在一个由'A'和'B'组成的字符串中,按照特定规则轮流删除颜色片段,判断Alice是否能够获胜,并提供了Python的实现代码。
36 3
|
18天前
|
自然语言处理 JavaScript 前端开发
【走向世界】Vue.js国际化:打造无国界应用,让爱与信息跨越语言的边界!
【8月更文挑战第30天】本文详细介绍了Vue.js中实现国际化的多种方法及最佳实践。通过使用`vue-i18n`等第三方库,开发者能够轻松地为应用添加多语言支持,优化用户体验并扩大市场覆盖范围。文章涵盖从基本配置、动态加载语言包到考虑文化差异等方面的内容,帮助读者构建真正全球化且无缝多语言体验的应用程序。
32 0
|
18天前
|
JavaScript 前端开发 UED
服务器端渲染新浪潮:用Vue.js和Nuxt.js构建高性能Web应用
【8月更文挑战第30天】在现代Web开发中,提升应用性能和SEO友好性是前端开发者面临的挑战。服务器端渲染(SSR)能加快页面加载速度并改善搜索引擎优化。Vue.js结合Nuxt.js提供了一个高效框架来创建SSR应用。通过安装`create-nuxt-app`,可以轻松创建新的Nuxt.js项目,并利用其自动路由功能简化页面管理。Nuxt.js默认采用SSR模式,并支持通过`asyncData`方法预取数据,同时提供了静态站点生成和服务器端渲染的部署选项,显著提升用户体验。
40 0
|
18天前
|
JavaScript 前端开发 C++
【Vue.js的终极对决】服务端渲染VS客户端渲染:一场关乎速度与SEO的生死较量!
【8月更文挑战第30天】Vue.js 是一个流行的 JavaScript 框架,支持服务端渲染(SSR)和客户端渲染。SSR 在服务器生成完整 HTML,有利于 SEO 并缩短首屏加载时间,但增加服务器负担;客户端渲染则在浏览器生成页面,提升交互性,降低服务器负载。本文通过代码示例对比两者优劣,并提供选择指南,帮助开发者根据 SEO 需求、交互性需求及服务器资源等条件,选择合适的渲染方式,从而优化应用性能和用户体验。
25 0
|
1月前
|
Python
【Leetcode刷题Python】50. Pow(x, n)
本文介绍了LeetCode第50题"Pow(x, n)"的解法,题目要求实现计算x的n次幂的函数,文章提供了递归分治法的详细解析和Python实现代码。
15 1
|
1月前
|
Python
【Leetcode刷题Python】LeetCode 478. 在圆内随机生成点
本文介绍了LeetCode 478题的解法,题目要求在给定圆的半径和圆心位置的情况下实现在圆内均匀随机生成点的功能,并提供了Python的实现代码。
16 1