733.图像渲染(深度优先遍历)

733.图像渲染(深度优先遍历)

算法入门第七天第一题,0.7.1

在这里插入图片描述
在这里插入图片描述

题目描述

有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 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直接存的就是颜色,[111]表示第一行从左向右的颜色依次是111

输入图像:

在这里插入图片描述

输出图像:

在这里插入图片描述

思路

深度、广度优先搜索都忘光了,借此机会重新学习,之后回看这部分。以下全部来自力扣官方题解。

我们从色块中任意一个地方开始,利用广度优先搜索或深度优先搜索即可遍历整个岛屿。

注意:当目标颜色和初始颜色相同时,我们无需对原数组进行修改。

广度优先搜索

我们从给定的起点开始,进行广度优先搜索。每次搜索到一个方格时,如果其与初始位置的方格颜色相同,就将该方格加入队列,并将该方格的颜色更新,以防止重复入队。

注意:因为初始位置的颜色会被修改,所以我们需要保存初始位置的颜色,以便于之后的更新操作。

class Solution {
public:
    const int dx[4] = {1, 0, 0, -1};
    const int dy[4] = {0, 1, -1, 0};

    vector<vector<int>> floodFill(vector<vector<int>>& image, int sr, int sc, int newColor) {
    int currColor = image[sr][sc];
    if(currColor == newColor) return image; //为什么初始点的颜色和新颜色一致就直接返回?

    int n=image.size();//行数  3
    int m=image[0].size();//列数 3
    queue<pair<int,int>> que; //创建队列 头进头出
    que.emplace(sr,sc);  //初始点入队
    image[sr][sc]=newColor;//先将初始点的颜色替换

    while(!que.empty()){
        int x=que.front().first;//  x被赋值为队列头元素的第一个值,对应行号
        int y=que.front().second;//  y被赋值为队列头元素的第二个值,对应列号
        que.pop();//队头 元素出队

        for(int i=0;i<4;++i){
            int mx=x+dx[i];
            int my=y+dy[i];  //[x,y]点向上下左右搜索

            if(mx>=0 && mx<n && my>=0 && my<m &&image[mx][my]==currColor){
                //更新后的点颜色与初始颜色一致
                que.emplace(mx,my); //当前点入队
                image[mx][my]=newColor;//将当前点的颜色替换
            }
        }
    }
    return image;
    }
};

深度优先搜索

我们从给定的起点开始,进行深度优先搜索。每次搜索到一个方格时,如果其与初始位置的方格颜色相同,就将该方格的颜色更新,以防止重复搜索;如果不相同,则进行回溯。

注意:因为初始位置的颜色会被修改,所以我们需要保存初始位置的颜色,以便于之后的更新操作。

class Solution {
public:
    const int dx[4] = {1, 0, 0, -1};
    const int dy[4] = {0, 1, -1, 0};
    void dfs(vector<vector<int>>& image, int x, int y, int color, int newColor) {
        if (image[x][y] == color) {
            image[x][y] = newColor;
            for (int i = 0; i < 4; i++) {
                int mx = x + dx[i], my = y + dy[i];
                if (mx >= 0 && mx < image.size() && my >= 0 && my < image[0].size()) {
                    dfs(image, mx, my, color, newColor);
                }
            }
        }
    }

    vector<vector<int>> floodFill(vector<vector<int>>& image, int sr, int sc, int newColor) {
        int currColor = image[sr][sc];
        if (currColor != newColor) {
            dfs(image, sr, sc, currColor, newColor);
        }
        return image;
    }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js 的深度 watch 对渲染速度的影响很大,因为它需要监听多层对象的变化,进而触发重新渲染。如果你想优化深度 watch 对渲染速度的影响,可以考虑以下几种方法: 1. 使用计算属性:将深度 watch 替换为计算属性,这样可以减少监听的层数。 2. 使用额外的变量:在数据变化时使用额外的变量,以减少 watch 对渲染速度的影响。 3. 使用 lazy:将 watch 的 deep 选项设置为 false,这样可以减少对渲染速度的影响。 4. 使用 throttle 和 debounce:通过使用 throttle 和 debounce 函数限制 watch 函数的触发频率,以减少对渲染速度的影响。 5. 尽量避免使用深度 watch:在项目设计时,尽量避免使用深度 watch,以提高渲染速度。 ### 回答2: 在优化Vue.js的深度watch以提高渲染速度方面,可以采取以下几个措施: 1. 减少深度watch的数据量:深度watch会对指定的数据进行递归监听,当数据变化时会触发重新渲染,对于大规模的数据结构或复杂的嵌套数据,深度watch可能会导致渲染速度下降。因此,在编写代码时尽量避免使用过多的深度watch,可以通过拆分数据结构,只对必要的数据进行监听。 2. 使用计算属性替代深度watch:Vue.js提供了计算属性的功能,通过计算属性可以根据依赖的数据自动更新结果,而不需要手动监听数据的变化。相比深度watch,计算属性可以更灵活地控制渲染的时机,避免不必要的渲染,从而提高渲染速度。 3. 利用缓存的深度watch结果:对于一些计算量较大的深度watch,可以通过缓存其结果来减少重复的计算,从而提高渲染速度。Vue.js中可以通过设置computed属性的缓存标志来实现,缓存结果后,只有在依赖数据变化时才会重新计算,否则直接从缓存中读取结果。 4. 使用异步更新:在某些情况下,深度watch可能会导致大量的数据变化引发连续的渲染,从而降低渲染效率。可以通过Vue.js提供的$nextTick方法,在下一个DOM更新循环中异步地更新渲染结果,这样可以将多次渲染合并为一次,提高渲染速度。 总而言之,优化Vue.js的深度watch可以通过减少数据量、使用计算属性、利用缓存和使用异步更新等措施来提高渲染速度,从而提升用户体验。 ### 回答3: Vue.js 是一款非常流行的前端框架,它的深度监视(deep watch)功能可以让我们方便地追踪数据的变化并及时更新界面。然而,深度监视也可能会影响渲染速度,特别是在数据量较大或嵌套层次较深的情况下。 为了优化深度监视对渲染速度的影响,我们可以采取以下几个措施: 1. 减少深度监视的范围:只监视真正需要监视的数据,而不是整个对象。可以使用计算属性来处理部分数据,只在需要时重新计算。 2. 使用惰性计算:通过使用 Vue 的 `lazy` 选项,在绑定时不立即计算数据,而是等到数据被使用时再进行计算。 3. 使用 debounce 或 throttle:如果数据更新频繁,我们可以使用 debounce(防抖动)或 throttle(节流)机制来限制监视的频率,减少不必要的渲染。 4. 使用 v-once 指令:对于那些不会改变的数据或界面,可以使用 v-once 指令来避免重复渲染。 5. 使用虚拟列表:如果存在大量列表数据需要渲染,可以考虑使用虚拟列表技术,只渲染当前可见区域的数据,而不是全部数据。 6. 使用 shouldComponentUpdate:在 Vue 3.0 中,可以使用 `shouldUpdateComponent` 钩子来手动控制组件是否需要重新渲染。可以根据具体情况进行优化,避免不必要的渲染。 通过以上优化措施,我们可以减少深度监视对渲染速度的影响,提高 Vue.js 应用的性能和用户体验。同时,也需要根据具体情况进行权衡和测试,以找到最合适的优化方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值