2024年前端面试题【基本功篇】

文章目录

  • 前言
  • 一、html 相关
    • 1.1 行内元素和块级元素分别有哪些?
    • 1.2 IE盒子模型和标准盒子模型
  • 二、css 相关
    • 2.1 选择器
    • 2.2 设置垂直居中的方法
    • 2.3 定位的几种方式
    • 2.4 清除浮动的几种方式
    • 2.5 rem、em、px、vw、vh区别
    • 2.6 响应式和自适应布局的区别
    • 2.7 元素隐藏的几种方式
    • 2.8 canvas 和 svg 的区别
  • 三、Javascript 相关
    • 3.1 数组的用法
    • 3.2 深拷贝和浅拷贝
    • 3.3 浏览器存储的方式
    • 3.4 排序的方法
    • 3.5 闭包
    • 3.6 Javascript的垃圾回收机制
    • 3.7 事件循环(event loop)
    • 3.8 节流和防抖
    • 3.9 undefined和null、空数组的区别
    • 3.10 什么是面向对象?封装、继承、多态
    • 3.11 跨域和同源
    • 3.12 原型和原型链
    • 3.13 数组去重
  • 四、总结


前言

本篇内容基本是前端开发必备技能,不算什么高深有难度的题型,一起来学习下吧。

在这里插入图片描述


一、html 相关

1.1 行内元素和块级元素分别有哪些?

  1. 行内元素:
span、a、b、strong、img、input、textarea、select、em、del
  1. 块级元素:
address、center、h1-h6、p、pre、ul、ol、dl、table、div、form
  1. 它们之间的区别:

    • 块级元素 可以设置宽高,设置 marginpadding 都有效,可以自动换行,排列默认从上到下

    • 行内元素 设置宽高无效,对 margin 设置左右方向有效,而上下无效。不会自动换行。

1.2 IE盒子模型和标准盒子模型

  1. 标准盒子模型

    height 包含了content 的高度,不包括 padding 的内边距和 border
    盒子的总宽度 = margin + border + padding + width
    width = content 的宽度

  2. IE盒子模型

    height 不但包括 content 的高度,还包括 paddingborder 的宽度。
    盒子的总宽度 = margin + width
    width = content 的宽度 + border边框宽度(左右) + padding内边距(左右)

二、css 相关

2.1 选择器

由高到低
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

2.2 设置垂直居中的方法

方法1: 利用 position: absolute ;

父元素:相对定位
子元素:绝对定位

.child{
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

方法2:元素 display 定义为 flex

<div class="flex-container"><div class="flex-item">居中的内容</div>
</div>
.flex-container {display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中,可选 */height: 200px; /* 容器的高度,可以根据需要设置 */
}.flex-item {/* 子元素样式,如果需要的话 */
}

方法3:设置文本 line-height 值和容器高度一致,然后 text-align: center ;

2.3 定位的几种方式

CSS定位的几种方式包括

  1. 静态定位(Static Positioning):这是默认定位方式,不需要特别声明。
  2. 相对定位(Relative Positioning):相对于其正常位置进行定位。
  3. 绝对定位(Absolute Positioning):相对于最近的非静态定位的父元素进行定位。
  4. 固定定位(Fixed Positioning):相对于浏览器窗口进行定位,无论滚动条如何滚动都会固定在屏幕的指定位置。
  5. 粘性定位(Sticky Positioning):根据用户的滚动位置在相对和固定定位之间切换。

示例代码

/* 静态定位 */
.static {position: static; /* 这是默认值,可以省略 */
}/* 相对定位 */
.relative {position: relative;top: 10px; /* 向下移动10px */left: 20px; /* 向右移动20px */
}/* 绝对定位 */
.absolute {position: absolute;top: 50px; /* 相对于最近的定位祖先元素向下移动50px */right: 30px; /* 向右移动30px */
}/* 固定定位 */
.fixed {position: fixed;bottom: 0; /* 固定在底部 */left: 0; /* 固定在左边 */
}/* 粘性定位 */
.sticky {position: -webkit-sticky; /* 针对Safari, Chrome, Edge等Webkit内核浏览器 */position: sticky; /* 标准语法 */top: 0; /* 当向下滚动超过此元素时固定在顶部 */
}

2.4 清除浮动的几种方式

  1. 使用额外的标签,并为其应用 clear 属性:
<div style="float: left;">浮动内容</div>
<div style="clear: both;"></div>
  1. 使用伪元素 ::after 来清除父元素的浮动:
.clearfix::after {content: "";display: table;clear: both;
}
<div class="clearfix">浮动内容</div>
  1. 使用 overflow 属性为非 visible 的值(如 autohidden
.overflow-method {overflow: auto; /* 或者使用 'hidden' */
}
<div class="overflow-method">浮动内容</div>
  1. 使用 FlexboxGrid 布局方式,这些方法不需要清除浮动:
.flex-container {display: flex;
}
<div class="flex-container">浮动内容</div>
  1. 使用 display: inline-blockvertical-align 属性清除内联元素的浮动:
.inline-block-method {display: inline-block;vertical-align: top;
}
<div class="inline-block-method">浮动内容</div>

2.5 rem、em、px、vw、vh区别

  1. rem 是相对 html 根元素 font-size 的值。

  2. em 继承父元素的字体大小,相对长度单位。

  3. px 像素,绝对单位长度

  4. vw 视图宽度

  5. vh 视图高度

2.6 响应式和自适应布局的区别

  1. 响应式:不同分辨率下设备灵活性好,它比自适应好,自适应的话只是宽度自适应;多终端视觉和用户操作体验好;响应式 web 设计中的大部分技术都可以用在 webapp 开发中,可以用在移动端设备,也可以用在 pc 端。
    尺寸:媒体查询、百分比、vw/vh、rem

  2. 自适应:又称为 宽度百分比 或者 流式布局 ,对页面进行压缩

2.7 元素隐藏的几种方式

  1. display:none; 性能消耗较大,因为涉及到 dom 操作。

  2. visibility:hidden;

  3. opacity:0;

  4. z-index:负值;

  5. 绝对定位将元素移除可视区域;

  6. color 透明度 设置为0

2.8 canvas 和 svg 的区别

  1. Canvas 是基于像素的绘图技术。在使用 Canvas 时,开发者可以通过 JavaScript 动态地在画布上绘制图形、文字和图像。

  2. SVG 是基于矢量的绘图技术。SVG 使用 XML 描述图形,开发者可以通过 XML 元素来定义图形的结构和样式。

三、Javascript 相关

3.1 数组的用法

常规用法:forEach、map、for…in、for…of 、join、push、shift、unshift、splice、slice、concat、indexOf…

for...in 循环的是数组的下标

for...of 循环的是数组每一项的值

1、forEach 没有返回值,返回为 undefinedmap有返回值,可以 return 出来。

2、forEach 会改变原数组,map 不会改变原数组,会存储新数组并返回。

es6数组:set、map、filter

has :将匹配元素集合缩减为包含特定元素的后代的集合,在数组中寻找是否包含有匹配的值。

用法:

var a=new Set([1,2,3]);
var b=new Set([4,3,2]);
var interset=new Set([...a].filter(x=>b.has(x)));

set 是一种叫集合的数据结构,map 是一种叫字典的数据结构。

集合:[value,value]

字典:[key,value]

3.2 深拷贝和浅拷贝

JavaScript的数据类型分为:

基本类型: Number,String,Boolean,Undefined,Null,Symbol,BigInt;

引用类型: 对象(Object),数组(Array),函数(Function);

浅拷贝:保存在栈内存中

1、展开语法,let newobj={...obj}

2、Object.assign 进行对象的合并

3、Array.prototype.contact()

4、Array.prototype.,slice()

深拷贝:保存在堆内存中

1、deepClone()

2、Object.entries(obj)

3、JSON.parse(JSON.stringify(待拷贝对象)

4、jQuery 中的 $.extend() 第一个参数设置为 true 为深拷贝,为 false 为浅拷贝(要引入JQuery库)

5、引入 loadsh ,提供 cloneDeep 实现

备注:json.stringfy() 将对象、数组转换成字符串;json.parse() 将字符串转成 json 对象。

3.3 浏览器存储的方式

浏览器存储的方式包括:cookieslocalstoragesessionstorageWebSQLIndexedDB

  1. cookies 在HTML5标准签本地存储的主要方式,优点兼容性好,请求头自带 cookie 方便。缺点:大小只有 4k ,自动请求头加入 cookie 浪费流量。

  2. Localstorage 操作方便,永久性存储,除非手动删除。大小为 5M ;

  3. Sessionstorage 页面关闭后会被清理,是会话级别的存储方式。

3.4 排序的方法

  1. sort()方法
var arr = [123,203,23,13,34,65,65,45,89,13,1];
function func(a,b){return a-b;
}
console.log(arr.sort(func)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
  1. 选择排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){//如果第一个比第二个大,就交换他们两个位置if(arr[i]>arr[j]){var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
  1. 冒泡排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0; i<arr.length-1; i++){//每一轮比较要比多少次for(var j=0; j<arr.length-1-i; j++){//如果第一个比第二个大,就交换他们两个位置if(arr[j]>arr[j+1]){var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}    
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
  1. 插入排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
var preIndex, current;
for(var i=1;i<arr.length;i++){preIndex = i-1;current = arr[i];while(preIndex>=0 && arr[preIndex]>current) {arr[preIndex+1] = arr[preIndex];preIndex--;}arr[preIndex+1] = current;
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
  1. 快速排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];	
//创建快速排序函数
function quickSort(tempArr){//递归终止条件if(tempArr.length<=1){return tempArr;};//取基准var pivotIndex = Math.floor(tempArr.length/2);var pivot = tempArr.splice(pivotIndex,1);//分左右var leftArr = [];var rightArr = [];for(var i=0;i<tempArr.length;i++){if(tempArr[i]>pivot){rightArr.push(tempArr[i]);}else{leftArr.push(tempArr[i]);};};return quickSort(leftArr).concat(pivot,quickSort(rightArr));
};
console.log(quickSort(arr)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

3.5 闭包

闭包 就是能够读取其他函数 内部变量 的函数,它是定义在 函数内部函数

  1. 变量私有化

  2. 让变量始终保存在内存中

弊端: 闭包会使函数中的变量都被保存在内存中,内存消耗很大,不能滥用,否则会造成网页性能问题;解决方法 是在退出函数之前,将不使用的局部变量全部删除。

3.6 Javascript的垃圾回收机制

  1. 如果一个对象不再被引用,那么这个对象就会被 GC 回收。

  2. 如果两个对象互相引用,而不再被第三者所引用,那么这两个对象都会被回收。

  3. 事件循环机制

3.7 事件循环(event loop)

  1. 任务队列先进先出

  2. 同步任务和异步任务

    • 同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务

    • 异步任务:不进入主线程、而进入 "任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

  3. 同步任务 > 宏任务 > 微任务

  • 同步任务,最外层的 console.log 最先打印,async 也属于同步任务

  • 宏任务setTimeoutsetInterval

  • 微任务process.nextTick(node)PromiseObject.observe(已废弃)MutationObserver(html5新特性)

过程:

  1. 执行宏任务队列中第一个任务,执行完后移除它

  2. 执行所有的微任务,执行完后移除它们

  3. 执行下一轮宏任务(重复步骤2)

如此循环就形成了event loop,其中,每轮执行一个宏任务和所有的微任务

3.8 节流和防抖

  1. 节流:持续触发事件,每隔一段时间只执行一次函数。场景:按钮点击、窗口大小调整、输入框输入事件

  2. 防抖:在一段时间内多次触发同一事件,只有最后一次触发后,函数才会执行。场景:滚动事件、鼠标移动、实时数据更新

3.9 undefined和null、空数组的区别

  1. undefined 表示变量已经声明,但是没有值;

  2. null 表示空

typeof undefined = undefined,但是 typeof null = object

undefined 转数值为 NaNnull 转数值为 0

拓展:

Undefined 表示变量应该有值,但未赋值

null 表示定义了一个空对象

NaN 表示非数字,其类型是 number

  1. 空数组

    • 空数组是一个真正的对象,只是包含元素个数为0,null数组是一个空引用

    • 空数组可以调用方法(函数),Array.prototype.every() 返回true

3.10 什么是面向对象?封装、继承、多态

1、typeof 基本类型√ 对象类型—— object

2、instanceof:检测某个对象是不是某个类的实例,一直向上检查

3、constructor:某个对象的亲爹是谁,到底是由谁构造出来的。

3.11 跨域和同源

  1. 跨域:是指从一个域名的网页去请求另一个域名的资源;协议域名端口,只要有一个的不同,就是跨域。

  2. 同源协议域名端口,三者全部相同,才是同源。

  3. 解决跨域的几种方式:

    • jsonp

    • document.domain + iframe

    • postMessage

    • CORS 跨域资源共享

    • node代理跨域

3.12 原型和原型链

原型:原型是一个对象,为其他对象提供共享属性的对象,又称原型对象;

函数(function):函数是一种特殊的对象,函数的原型存放在 prototype 属性上。

对象(Object): 普通对象的原型是存放到内置属性上,可以通过对象的 __proto__ 来访问对象的原型。

数组(Array): 数组也是一种特殊的对象,但与函数不同的是它的原型和普通对象一样,也是存放到内置属性上,可以通过数组的 __proto__ 来访问数组的原型。

原型链:在 JavaScript 中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过 prototype 对象指向父类对象,直到指向 Object 对象为止(person → Person → Object),这样就形成了一个原型指向的链条,专业术语称之为原型链。

用法:__proto__和constructor

hasOwnProperty() 判断属性是否属于原型链上的属性 。

3.13 数组去重

  1. 使用Set对象和扩展运算符(…)
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
  1. 使用filter方法和indexOf
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
  1. 使用reduce方法
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {if (acc.indexOf(current) === -1) {acc.push(current);}return acc;
}, []);
  1. 使用Map对象或Object
const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueObject = {};
array.forEach(item => {uniqueObject[item] = true;
});
const uniqueArray = Object.keys(uniqueObject).map(Number);
  1. 使用for循环和indexOf
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {if (uniqueArray.indexOf(array[i]) === -1) {uniqueArray.push(array[i]);}
}

四、总结

简简单单先到这里吧,说多了没头了。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Excel设置生日自动智能提醒,公式可直接套用!

大家好&#xff0c;我是小鱼。 今天跟大家分享一个WPS表格中根据出生日期&#xff0c;设置生日提醒&#xff0c;并且根据距离生日天数自动标记数据颜色。简单又实用&#xff0c;一个公式轻松搞定&#xff01; 接下来我们先学习一下需要使用到的函数&#xff0c;然后再根据实例让…

【MAC】深入浅出 Homebrew 下 Nginx 的安装与配置指南

硬件&#xff1a;Apple M4 Pro 16寸 系统&#xff1a; macos Sonoma 15.1.1 Nginx 是一款高性能的 Web 服务器和反向代理服务器&#xff0c;广泛应用于全球各地的网站和企业应用中。本文将详细介绍如何在 macOS 环境下使用 Homebrew 安装、启动、管理以及优化配置 Nginx&#x…

安卓环境配置及打开新项目教程,2024年12月20日最新版

1.去官网下载最新的Android Studio&#xff0c;网址&#xff1a;https://developer.android.com/studio?hlzh-cn 2.下载加速器&#xff0c;注册账号&#xff0c;开启加速器。网址&#xff1a;放在文末。 3.下载安卓代码&#xff0c;项目的路径上不能有中文&#xff0c;特别是…

VMware虚拟机Ubuntu 18.04版本 磁盘扩容

一、版本配置 虚拟机版本&#xff1a;VMware WORKSTATION 16 PRO Ubuntu版本&#xff1a;Ubuntu 18.04 二、磁盘大小介绍 目的&#xff1a;磁盘扩容&#xff08;20G----->100G&#xff09;&#xff0c;从20G扩到100G 查看磁盘大小命令&#xff1a;df -h 扩容前的磁盘大小 …

10. 虚拟机VMware Workstation Pro下共享Ubuntu和Win11文件夹

本文记录当前最新版虚拟机VMware Workstation Pro&#xff08;2024.12&#xff09;如何在win11下共享文件&#xff0c;以实现Windows与Ubuntu互传文件的目的。 1. 创建共享文件夹 1.1 先关闭虚拟机的客户机&#xff0c;打开虚拟机设置 1.2 在虚拟机设置界面找到“选项”->“…

HTTP—03

触发 GET 请求 1&#xff09;直接在浏览器 地址栏 输入 URL&#xff0c;此时构成了一个GET请求 2&#xff09;HTML中的一些特殊标签可能会触发 例如 img,a,link,script... 3&#xff09;通过Form表单触发&#xff08;Form本质也是一个HTML标签&#xff09; 4&#xff0…

2024年《网络安全事件应急指南》

在这个信息技术日新月异的时代&#xff0c;网络攻击手段的复杂性与日俱增&#xff0c;安全威胁层出不穷&#xff0c;给企事业单位的安全防护能力带 来了前所未有的挑战。深信服安全应急响应中心&#xff08;以下简称“应急响应中心”&#xff09;编写了《网络安全事件应急指南》…

MobaXterm 连接不上VMware 的Ubuntu 虚拟机

想在window11的笔记本上通过VMWare安装Ubuntu操作系统&#xff0c;但是在两个桌面见来回切换&#xff0c;十分的麻烦&#xff0c;于是通过远程服务访问客户端软件MateXterm来访问虚拟机的Linux系统&#xff0c;但是从CSDN上搜到的教程都没有成功&#xff0c;于是&#xff0c;尝…

MapReduce的shuffle过程详解

文章目录 MapReduce的shuffle过程详解一、引言二、Shuffle过程详解1、Map端Shuffle1.1、分区&#xff08;Partition&#xff09;1.2、排序&#xff08;Sort&#xff09;1.3、分割&#xff08;Spill&#xff09; 2、Reduce端Shuffle 三、使用示例四、总结 MapReduce的shuffle过程…

AI图像生成利器:Stable Diffusion 3.5本地运行与远程出图操作流程

文章目录 前言1. 本地部署ComfyUI2. 下载 Stable Diffusion3.5 模型3. 演示文生图4. 公网使用Stable Diffusion 3.5 大模型4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 本篇文章将介绍如何在Windows系统电脑本地部署Stable Diffusion 3.5&#xff0c;并利用cpolar…

【容器】k8s学习笔记原理详解(十万字超详细)

Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据&am…

​ 阅读英文文献时,有哪些提高理解效率的方法?

当我们拿起一篇文献开始阅读时&#xff0c;就像是打开了一扇通往未知世界的大门。但别急着一头扎进去&#xff0c;咱们得像个侦探一样&#xff0c;带着疑问去探险。毕竟&#xff0c;知识的海洋深不可测&#xff0c;不带点“装备”怎么行&#xff1f;今天就聊聊&#xff0c;平时…

PC寄存器(Program Counter Register) jvm

在JVM&#xff08;Java虚拟机&#xff09;中&#xff0c;PC寄存器&#xff08;Program Counter Register&#xff09;扮演着至关重要的角色&#xff0c;它是JVM执行引擎的核心组成部分之一。以下是PC寄存器在JVM中的具体角色和职责&#xff1a; 指令执行指针&#xff1a; PC寄存…

WSL Ubuntu

文章目录 1. 概述1.1 什么是适用于 Linux 的 Windows 子系统1.2 什么是 WSL 21.3 WSL 2 中的新增功能1.4 比较 WSL 2 和 WSL 1 2. 参考资料3. 修改存储位置4. 网络访问 1. 概述 1.1 什么是适用于 Linux 的 Windows 子系统 适用于 Linux 的 Windows 子系统可让开发人员按原样运…

网络安全概论——入侵检测系统IDS

一、入侵检测的概念 1、入侵检测的概念 检测对计算机系统的非授权访问对系统的运行状态进行监视&#xff0c;发现各种攻击企图、攻击行为或攻击结果&#xff0c;以保证系统资源的保密性、完整性和可用性识别针对计算机系统和网络系统或广义上的信息系统的非法攻击&#xff0c…

登山第十六梯:深度恢复——解决机器人近视问题

文章目录 一 摘要 二 资源 三 内容 一 摘要 深度感知是基于 3D 视觉的机器人技术的一个重要问题。然而&#xff0c;现实世界的主动立体或 ToF 深度相机经常会产生嘈杂且深度不完整&#xff0c;从而成为机器人性能的瓶颈。在这项工作中&#xff0c;提出了 一个基于学习的立体…

【NLP】序列到序列(seq2seq)建模工具fairseq使用详解

文章目录 一、fairseq简介二、安装方式2.1 pip安装2.2 源码安装 三、fairseq命令工具3.1 fairseq-preprocess3.2 fairseq-train3.3 fairseq-generate3.4 fairseq-interactivate3.5 fairseq-score3.6 fairseq-eval-lm 4. 常见报错报错1 参考资料 一、fairseq简介 fairseq 是 Fa…

108. 将有序数组转换为二叉搜索树(java)

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0,5,9] 输出&#xff1a;[0,-3,9,-10,null,5] 解释&#xff1a;[0,-10,5,null,-3,…

flink集群搭建 详细教程

一、环境准备 1、准备三台服务器 三台服务器ip 115.120.227.194 jobmanger 123.60.154.232 taskmanger 36.111.173.249 taskmanger 2、给三台主机分别配置主机名 #第一台机器 hostnamectl set-hostname hadoop01#第二台机器 hostnamectl set-hostname hadoop02#第三台…

C# opencvsharp 流程化-脚本化-(2)ROI

ROI ROI也是经常需要使用的方法。特别是在图像编辑中。ROI又称感兴趣的区域&#xff0c;但是图像是矩阵是矩形的&#xff0c;感兴趣的是乱八七糟的&#xff0c;所以还有一个Mask需要了解一下的。 public class RoiStep : IImageProcessingStep{public ImageProcessingStepType…