视觉区域效果图方案的原理分析
最编程
2024-06-13 19:19:08
...
移动端页面随着滑动的dom越来越长,会出现卡顿的现象,进而降低用户体验,于是可视区渲染方案出来。
可视区渲染就像一句话说的:敌不动我动,山不就我我就山。
可视区渲染原理:
1,有个滚动区域,下面的content类,要求overflow:auto,也就是可以使用滚动;在实际项目开发中这个根据可视区窗口大小变化
2,一个足够高的渲染盒子,下面中viewArea类,其高度等于所有内容条数x单条内容高度,在实际项目中这个会受限于手机html的最大高度限制
3,可视区显示的内容条数viewArea类里面的内容,内容多少可以通过pageSize控制
4,通过监听滚动事件,触发可视区内容更新,包括更新呈现的内容以及更新内容的位置,后者其实是人为制造了一种滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无限滚动中的虚拟列表(只渲染可视区域,dom元素可复用)</title> <meta name="viewport" content="initial-scale=1.0"> <meta name="format-detection" content="telephone=no, email=no"> </head> <body> <header> <!-- <h1>无限滚动中的虚拟列表-防抖和节流(只渲染可视区域,dom元素可复用)</h1> --> <h1>无限滚动中的虚拟列表(只渲染可视区域,dom元素可复用)</h1> </header> </article> <article class="d-part d-effect"> <style> .container { height: 600px; overflow: auto; } .item { min-height: 60px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; width: 100%; text-align: center; background-color: darkgray; /* padding: 30px 0; box-sizing: border-box; */ } </style> <div class="container"> <div class="content"> <div class="viewArea"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div> </div> <script> var item = document.querySelector('.viewArea .item'); //需要渲染的单个列表元素 var container = document.querySelector('.container'); //可视区域元素盒子 console.log(item); var start = 0; // 开始位置 var pageSize = 10; // 每页展示的数据 var total = 100000; //数据总长度 // var itemHeight = 61; // 每个item的高度 var itemStyle = getComputedStyle(item); // 获取元素最终样式 var itemHeight = Number(itemStyle.height.split('px')[0]) + Number(itemStyle.borderTopWidth.split('px')[0]) + Number(itemStyle.borderBottomWidth.split('px')[0]); // 每个item的高度 console.log('itemHeight', itemHeight); // 设置数据列表的总高度 document.querySelector('.container .content').style.height = itemHeight * total + 'px'; updateDom(start, pageSize, 0); //更新渲染列表的高度和数据 function updateDom(start, pageSize, height) { document.querySelector('.container .content .viewArea').style.transform = 'translateY(' + height + 'px)'; let all = document.querySelectorAll('.viewArea .item'); // 获取所有渲染列表 for (var i = start, itemIndex = 0, len = start + pageSize; i < len; i++, itemIndex++) { all[itemIndex].innerHTML = i; } } // 滚动处理函数 function handleScroller() { var lastStart = 0; // 上次开始的位置 return () => { var currentScrollTop = container.scrollTop; var fixedScrollTop = currentScrollTop - currentScrollTop % itemHeight; // currentScrollTop % itemHeight这个是为了让滚动效果更自然 console.log(currentScrollTop, currentScrollTop % itemHeight) var start = Math.floor(currentScrollTop / itemHeight); if (lastStart !== start) { // 这块避免一些重复性渲染,这样也不用计算方向了 lastStart = start; updateDom(start, pageSize, fixedScrollTop); } } } document.querySelector('.container').addEventListener('scroll', handleScroller(), false); </script> </article> </div> </body> </html>
推荐阅读
-
视觉区域效果图方案的原理分析
-
视觉编辑器的辅助线生成和自动吸收原理分析
-
[Halcon&拟合] 拟合直线边缘并计算距离-图像预处理: 一般是去噪或抠图(blob分析抠图或手绘ROI区域抠图)两方面 轮廓提取: 1)boundary:区域轮廓提取 2)edges_sub_pix:图像轮廓提取 3)threshold_sub_pix:图像轮廓提取 使用算子edges_sub_pix进行亚像素的边缘提取最为普遍。其用到的滤波器有Deriche, Lanser, Shen, or Canny filters。 关于这几个滤波器的对比,帮助文档有如下介绍: Deriche, Lanser, Shen为递归滤波器,Canny 为掩膜滤波器; 递归滤波器的执行时间不依赖滤波器的大小,Canny的执行时间与滤波器大小成正相关。 参数alpha数值越大,Deriche, Lanser, Shen滤波器宽度越小,平滑越差,细节越突出,而Canny效果相反。 分割、联合(根据情况而定) 分割算子: segment_contours_xld:可分割’lines’,‘lines_circles’,‘lines_ellipses’,原理是多边形逼近,逼近程度通过算子中后两个阀值参数控制。 联合算子: 临近:union_adjacent_contours_xld (Operator) 共线:union_collinear_contours_xld (Operator) 共圆:union_cocircular_contours_xld (Operator) 拟合 fit_line_contour_xld:拟合直线 fit_line_contour_xld:拟合圆 fit_ellipse_contour_xld:拟合椭圆 fit_rectangle2_contour_xld:拟合矩形 注:有时候在拟合轮廓之前需要判断一下轮廓属性,以确定应拟合成直线还是还是圆,可通过算子:get_contour_global_attrib_xld (SingleSegment,‘cont_approx’,)名字:获取轮廓属性描述:用于确定应拟合成直线还是还是圆参数:SingleSegment:输入轮廓(input_object)cont_approx:属性名称,即采用什么方式去计算 ,一般用这个参数就可以了(input_control)Attrib:属性值: Attrib>0:拟合圆,否则拟合直线(output_control) ) 求距离 二、示例:
-
计算机视觉中,究竟有哪些好用的目标跟踪算法(下)-快速变形主要因为CF是模板类方法。容易跟丢这个比较好理解,前面分析了相关滤波是模板类方法,如果目标快速变形,那基于HOG的梯度模板肯定就跟不上了,如果快速变色,那基于CN的颜色模板肯定也就跟不上了。这个还和模型更新策略与更新速度有关,固定学习率的线性加权更新,如果学习率太大,部分或短暂遮挡和任何检测不准确,模型就会学习到背景信息,积累到一定程度模型跟着背景私奔了,一去不复返。如果学习率太小,目标已经变形了而模板还是那个模板,就会变得不认识目标。(举个例子,多年不见的同学,你很可能就认不出了,而经常见面的同学,即使变化很大你也认识,因为常见的同学在你大脑里面的模型在持续更新,而多年不见就是很久不更新) 快速运动主要是边界效应(Boundary Effets),而且边界效应产生的错误样本会造成分类器判别力不够强,下面分训练阶段和检测阶段分别讨论。 训练阶段,合成样本降低了判别能力。如果不加余弦窗,那么移位样本是长这样的: 除了那个最原始样本,其他样本都是“合成”的,100*100的图像块,只有1/10000的样本是真实的,这样的样本集根本不能拿来训练。如果加了余弦窗,由于图像边缘像素值都是0,循环移位过程中只要目标保持完整那这个样本就是合理的,只有目标中心接近边缘时,目标跨越边界的那些样本是错误的,这样虽不真实但合理的样本数量增加到了大约2/3(padding= 1),即使这样仍然有1/3(3000/10000)的样本是不合理的,这些样本会降低分类器的判别能力。再者,加余弦窗也不是“免费的”,余弦窗将图像块的边缘区域像素全部变成0,大量过滤掉分类器本来非常需要学习的背景信息,原本训练时判别器能看到的背景信息就非常有限,我们还加了个余弦窗挡住了背景,这样进一步降低了分类器的判别力(是不是上帝在我前遮住了帘。不是上帝,是余弦窗)。 检测阶段,相关滤波对快速运动的目标检测比较乏力。相关滤波训练的图像块和检测的图像块大小必须是一样的,这就是说你训练了一个100*100的滤波器,那你也只能检测100*100的区域,如果打算通过加更大的padding来扩展检测区域,那样除了扩展了复杂度,并不会有什么好处。目标运动可能是目标自身移动,或摄像机移动,按照目标在检测区域的位置分四种情况来看: 如果目标在中心附近,检测准确且成功。 如果目标移动到了边界附近但还没有出边界,加了余弦窗以后,部分目标像素会被过滤掉,这时候就没法保证这里的响应是全局最大的,而且,这时候的检测样本和训练过程中的那些不合理样本很像,所以很可能会失败。 如果目标的一部分已经移出了这个区域,而我们还要加余弦窗,很可能就过滤掉了仅存的目标像素,检测失败。 如果整个目标已经位移出了这个区域,那肯定就检测失败了。 以上就是边界效应(Boundary Effets),推荐两个主流的解决边界效应的方法,但速度比较慢,并不推荐用于实时场合。