扫描线填充算法（有序边表法）JavaScript实现

已于 2022-05-09 00:11:38 修改
阅读量1k 收藏 11
点赞数 4
分类专栏： 数据结构 文章标签： javascript 开发语言 ecmascript
于 2020-11-16 17:16:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qikik/article/details/109725446
版权

参考于：
算法系列之十二：多边形区域填充算法－－扫描线填充算法（有序边表法）
结果展示：
结果展示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>扫描线填充</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

	<h1>Scan-Line Filling</h1>
	<h2>请点击屏幕画点，系统会自动为您连线</h2>
	<div>
		<button id="beginFill" onclick="Fill()">开始填充</button>
		<button id="goBackToPreStep" onclick="Clear()">清空画布</button>
	</div>
	<div>
		<canvas id="myCanvas" width="1000" height="800" style="border: 1px solid  #000000;"></canvas>
	</div>
	<script type="text/javascript">
		//类的定义及函数实现在最下面
		const canvas=document.getElementById('myCanvas');
		var ctx=canvas.getContext("2d");
		ctx.lineWidth=1;
		
		var isRight=true;
		var ymin=10000;
		var ymax=0;

		var Points=new Array();//存储点
		var Points_count=0;

		var Lines=new Array();//把所有的边打个标号放入
		var Lines_count=0;

		var next=new Array();//Lines[next[i]]:即为下一条边
		var head=-1;//活动边表的头


		canvas.addEventListener("click",function(e){//定义点击事件
			if(isRight==true){//在没有点击Fill之前可以绘点
				var tempPoint=new Point();
				tempPoint.x=e.offsetX;
				tempPoint.y=e.offsetY;
				if(tempPoint.y>ymax){
					ymax=tempPoint.y;
				}
				if(tempPoint.y<ymin){
					ymin=tempPoint.y;
				}

				Points[Points_count]=tempPoint;
				if(Points_count>=1){//连边
					ctx.strokeStyle="red";
					ctx.beginPath();
					ctx.moveTo(Points[Points_count-1].x,Points[Points_count-1].y);
					ctx.lineTo(Points[Points_count].x,Points[Points_count].y);
					ctx.closePath();
					ctx.stroke();
				}
				Points_count++;
			}

		},false);
		
		/*-------绘制函数：点击button时候执行-------*/
		function Fill(){
			/*-----------Fill----------*/
			//将最后一个点和第一个点相连
			isRight=false;
			ctx.beginPath();
			ctx.moveTo(Points[0].x,Points[0].y);
			ctx.lineTo(Points[Points_count-1].x,Points[Points_count-1].y);
			ctx.closePath();
			ctx.stroke();
			//定义一个新边表（NET）
			var slNet=new Array(ymax-ymin+1);
			for(var i=0;i<slNet.length;i++)
				slNet[i]=[];//生成二维数组
			//初始化新边表
			InitNET();
			//进行扫描线填充
			ProcessScanLineFill();
			/*-----------END----------*/


			/*以下为Fill()中所需的函数*/
			//初始化新边表
			function InitNET(){
				for(var i=0;i<Points_count;i++){
					
					var e=new tagEdge();
					e.id=Lines_count++;
					e.isIn=false;

					var L_start=Points[i];//边的第一个顶点
					var L_end=Points[(i+1)%Points_count];//边的第二个顶点
					var L_start_pre=Points[(i - 1 + Points_count) % Points_count];//第一个顶点前面的点
					var L_end_next=Points[(i +2 ) % Points_count];//第二个顶点后面的点
					if(L_end.y!=L_start.y){//跳过水平线
						e.dx=(L_end.x-L_start.x)/(L_end.y-L_start.y);//1/k
						if(L_end.y>L_start.y){
							e.xi=L_start.x;
							if(L_end_next.y>=L_end.y){
								e.ymax=L_end.y-1;
							}else e.ymax=L_end.y;

							slNet[L_start.y-ymin].push(e);
						}else{
							e.xi=L_end.x;
							if(L_start_pre.y>=L_start.y){
								e.ymax=L_start.y-1;
							}else e.ymax=L_start.y;

							slNet[L_end.y-ymin].push(e);
						}
						Lines.push(e);
					}
				}
				var tp=new tagEdge();//javascript中不允许数组为空，因此这里填入一个空边
				for(var i=0;i<slNet.length;i++){
					slNet[i].push(tp);
				}

			}
			function ProcessScanLineFill(){
				//初始化活动边表的信息
				head=-1;
				for(var i=0;i<Lines.length;i++)
					next[i]=-1;
				/*----开始扫描线算法---*/
				ctx.strokeStyle="blue";
				ctx.beginPath();
				for(var y=ymin;y<=ymax;y++){
					insert(y-ymin);//插入新边
					for(var i=head;i!=-1;i=next[next[i]]){//绘制该扫描线
						if(next[i]!=-1){
							ctx.moveTo(Lines[i].xi,y);
				    		ctx.lineTo(Lines[next[i]].xi,y);
				    	}
					}
					remove(y);//删除非活动边
					update_AET();//更新活动边表中每项的xi值，并根据xi重新排序
				}
				ctx.closePath();
			    ctx.stroke();
			    /*----END扫描线算法---*/


			     /*----扫描线算法所需的函数---*/
			    //删除非活动边
			    function remove(y){
			    	var pre=head;
			    	while(head!=-1&&Lines[head].ymax==y){
			    		Lines[head].isIn=false;
			    		head=next[head];
			    		next[pre]=-1;
			    		pre=head;
			    	}
			    	if(head==-1) return;
			    	var nxt=next[head];
			    	for(var i=nxt;i!=-1;i=nxt){
			    		nxt=next[i];
						if(Lines[i].ymax==y){
							next[pre]=next[i];
							Lines[i].isIn=false;
							next[i]=-1;
						}else pre=i;
					}
			    }

			    //更新活动边表中每项的xi值，并根据xi重新排序
			    function update_AET(){
			    	for(var i=head;i!=-1;i=next[i]){
						Lines[i].xi+=Lines[i].dx;
					}
					//按照冒泡排序的思想O(n)重新排序
					if(head==-1) return;
					if(next[head]==-1) return;
					var pre=head;
					if(Lines[head].xi>Lines[next[head]].xi){
						head=next[head];
						next[pre]=next[head];
						next[head]=pre;
						pre=head;
					}
					var j=next[head];
					for(var i=j;i!=-1;i=j){
						j=next[i];
						if(j==-1) break;
						if(Lines[i].xi>Lines[next[i]].xi){
							next[pre]=next[i];
							next[i]=next[next[i]];
							next[j]=i;
						}else pre=i;
					}
			    }

			    //将扫描线对应的所有新边插入到AET中
			    function insert(y){
			    	for(var i=0;i<slNet[y].length;i++){
						var temp=slNet[y][i];

						if(temp.ymax==0&&temp.dx==0) break;
						
						if(head==-1){
							head=temp.id;
						}else{
							if(temp.xi<Lines[head].xi){
								next[temp.id]=head;
								head=temp.id;
							}else{
								var pre=head;
								for(var j=next[head];;j=next[j]){
									if(j==-1||temp.xi<Lines[j].xi){
										next[pre]=temp.id;
										next[temp.id]=j;
										break;
									}
									pre=j;
								}
							}
						}
						temp.isIn=true;
					}
			    }

			} 

		}
		/*-------清空画布-------*/
		function Clear(){
			canvas.height=canvas.height//重新定义高度清空画布
			ctx.lineWidth = 1;//线的宽度

			isRight=true;
			ymin=10000;
			ymax=0;

			Points.splice(0,Points.length);
			Points_count=0;
			Lines.splice(0,Lines.length);
			Lines_count=0;
		}
		/*-----类的定义--------*/
		function Point(){
			this.x=0;
			this.y=0;
		}
		function tagEdge(){
			this.xi=0;
			this.dx=0;//  1/k
			this.ymax=0;
			this.id=0;
			this.isIn=false;
		}

	</script>

</body>
</html>
qikik
关注
专栏目录
算法系列之十二：多边形区域填充算法－－扫描线填充算法（有序边表法）
java开发指南博客 【转载】
03-19 6344
二、扫描线算法（Scan-Line Filling） 扫描线算法适合对矢量图形进行区域填充，只需要直到多边形区域的几何位置，不需要指定种子点，适合计算机自动进行图形处理的场合使用，比如电脑游戏和三维CAD软件的渲染等等。 对矢量多边形区域填充，算法核心还是求交。《计算几何与图形学有关的几种常用算法》一文给出了判断点与多边形关系的算法――扫描交点的奇偶数判断算法，利用此算法可以判断一个点是否在多...
javascript 扫描线算法（附渲染效果）
09-12
扫面线算法，计算机图形学中比较典型的算法。逻辑编写基于javascript。效果渲染基于canvas。
扫面线算法 javascript版
苹果蜀黍与福尔猫斯
09-12 374
前言 关于随机多边形填色，无意看到了扫描线算法，虽然目前还不能完全解决我遇到的问题。但是已经有了方向，顺便用js实现了一个demo。 效果图 效果还算满意，基本达到了预期的效果。 一、需求 所谓代码未写，需求先行。有了需求边界，才好下手。 需求描述：对任意边数的多边形进行填充。（不限制凸面体与凹面体） 二、分析 任意数量不重复的矢量无序队列（矢量 = 点）。 临近序列的两点组合成线段，首尾序列点闭合成线段。 所有线段组成我们需要填充的多边形。 维护一条平行于x轴的扫面线。（扫描线可以是任意直线）
多边形填充算法-有序边表法（扫描线算法）
weixin_34358092的博客
01-25 1740
1.算法的基本思想（扫描线连贯性原理）： 　　对于一个给定的多边形，用一组水平(垂直)的扫描线进行扫描，对每一条扫描线均可求出与多边形边的交点，这些交点将扫描线分割成落在多边形内部的线段和落在多边形外部的线段；并且二者相间排列。于是，将落在多边形内部的线段上的所有象素点赋以给定的色彩值。 算法中不需要检验每一个象素点，而只考虑与多边形边相交的交点分割后的扫描线段。 2.算法求解...
有序边表填充算法
04-21
有序边表填充算法
计算机图形学——扫描线填充算法（有序边表）代码简单易懂可运行
weixin_52036334的博客
11-04 1529
【代码】计算机图形学——扫描线填充算法（有序边表）代码简单易懂可运行。
实现线段Bresenham算法光栅化，圆的中点法光栅化以及有序边表法对多边形上色
10-23
本主题主要探讨了三种光栅化方法：线段的Bresenham算法、圆的中点法以及有序边表法（扫描线算法）在WebGL环境中的实现，特别是不涉及WebGL底层的着色器代码，而是侧重于算法的逻辑。 **1. Bresenham算法** ...
扫描线填充算法
12-10
计算机图形学扫描线填充算法，采取JavaScript、HTML实现，文件是一个XXX.html，可以直接点击运行，也可以通过查看其源代码
图形学实验大礼包---直线 椭圆 圆 扫描算法 填充算法 用WebGL OpenGL
01-16
常见的填充算法有：扫描线算法、八连通性和四连通性等。扫描线算法是一种基于行的填充方法，通过逐行检查像素是否位于图形边界内来填充颜色。八连通性和四连通性则是判断相邻像素是否属于同一图形区域的方法，常用于...
扫描转换多边形的扫描线算法代码
12-08
通常采用非交叉扫描线算法（如扫描线填充算法）来避免空洞和重叠。 6. **输出**：将填充的像素显示在屏幕上。 压缩包中的文件"扫描转换多边形的扫描线算法"很可能包含了实现这些步骤的源代码。代码可能使用某种...
Scan-line-Fill:使用Scanline方法实现多边形填充
05-01
扫描线填充 使用OpenGL和GLUT的Scanline算法实现多边形填充。 ＃用 只需右键单击所需的顶点，然后单击鼠标左键->“绘制多边形”以进行填充。 #Dependencies GLUT和OpenGL。 ＃执照 麻省理工学院
c++（QT5）图形学-扫描线填充法（完整工程文件）
06-06
鼠标左右键和中键操作。可以用vs或QT creator打开。这是完整的项目文件夹，保证编译通过。
图形填充算法_有序边表算法
03-20
void main(int argc,char* argv[]) { char arg[50]={0}; arg[0]= '\"'; strcpy(arg+1,argv[0]); int len=int(strlen(arg)); arg[len]= '\"'; HWND hWnd=FindWindow(NULL,arg); //找到程序运行窗口的句柄 HDC hdc=GetWindowDC(hWnd);//通过窗口句柄得到该窗口的设备场境句柄 struct Edge *edge; struct Node *node; int coorval[14]={230,200,290,170,280,100,240,130,200,100,180,170,230,200}; node=Inti_Node(coorval,14);//初始化顶点表 edge=Inti_Edge(node,14); int ymin=1000,ymax=0; struct Node *node_p; node_p=node; while(node_p!=NULL)//找出最高扫描线和最低扫描线 { if(node_p->yy; if(node_p->y>ymax) ymax=node_p->y; node_p=node_p->next; } struct ET *head[1000]; Build_NET(edge,ymin,ymax,head); AET_Fill(head,ymin,ymax,hdc); }
扫描线ZBuffer算法
02-04
实现扫描线ZBuffer算法，光照计算，纹理坐标计算，矩阵变换。 共两个模型。 杯子 在CscanLineZBView::buidCup()中生成。 是用一条基线绕一条轴旋转生成。含有1400个四边形 带孔立方块 是用CAD建模中学的半边结构和欧拉操作生成。 内有程序说明Doc
【填充算法】扫描线法
huanmanxiang3813的博客
01-04 496
扫描线算法： http://blog.csdn.net/u013044116/article/details/49737585 http://blog.csdn.net/flyfish5/article/details/49281539 扫描线种子填充算法： http://blog.csdn.net/gongfuxiaozi11/article/details/17248437
扫描线填充法——有序边表法对多边形上色
appeix的博客
10-23 444
活性边表法对多边形上色 如果不知道何为活性边表法的同学可以参阅： https://blog.csdn.net/ZY_cat/article/details/78184336 https://blog.csdn.net/u013044116/article/details/49737585 我们对一个多边形进行从上至下的扫描，将每个节点的纵坐标伸展出一条扫描线，将扫描线从上至下排序，然后按照每条扫描线： 将即将扫描到的边加入新边表 对新边表进行排序 每条扫描线不断向下逐行像素求交点（线段的交点的横坐标可以用
有序边表算法----计算机图形学
但行好事，莫问前程
10-14 9834
有序边表算法： 有序边表算法的基本思想是：用水平扫描线从上到下（或从下到上）扫描由多条首尾相连的线段构成的多边形，每根扫描线与多边形的某些边产生一系列交点。将这些交点按照x坐标排序，将排序后的点两两成对，作为线段的两个端点，以所填的颜色画水平直线。多边形被扫描完毕后，颜色填充也就完成了。扫描线填充算法也可以归纳为以下4个步骤： （1） 求交，计算扫描线与多边形的交点 （2） 交点排序，...
【计算机图形学】实验二 用扫描线算法实现多边形填充
最新发布
进一步有一步的欢喜
02-04 1966
一、实验目的及要求 本实验旨在掌握扫描线算法的原理和实现方法，通过编写程序实现多边形的填充。
c++多边形扫描线填充算法_扫描线填充算法-有序边表法
05-25
多边形扫描线填充算法是一种基于扫描线的算法，主要用于将一个封闭的多边形区域进行填充。有序边表法是多边形扫描线填充算法的一种实现方式。 有序边表法的基本思路是将多边形区域分割成若干条水平的线段，并将这些线段按照从上到下的顺序排序，形成有序边表。然后，从上到下扫描每条扫描线，将扫描线与多边形边界相交的线段加入活动边表。对于每条扫描线，从左到右依次处理活动边表中的线段，根据线段的左右端点的交点来确定需要填充的区域。 具体实现时，我们可以使用一个数组来维护有序边表和活动边表。每个元素存储一条线段的信息，如线段的上端点、下端点、斜率等。在扫描线过程中，我们需要动态地更新有序边表和活动边表，以便能够正确地计算出需要填充的像素区域。 以下是基于有序边表法的多边形扫描线填充算法的主要步骤： 1. 将多边形的边按照从上到下的顺序排序，形成有序边表。 2. 初始化活动边表为空。 3. 从上到下扫描每条扫描线。对于每条扫描线，从左到右处理活动边表中的线段，根据线段的左右端点的交点来确定需要填充的区域，并将填充的像素标记为已填充。 4. 对于每个顶点，将其左侧的线段加入活动边表，将其右侧的线段从活动边表中删除。 5. 如果当前扫描线与某条边界线段相交，则根据相交点的位置来判断是否需要将该线段加入或删除活动边表。 6. 重复步骤3~5，直到扫描完整个多边形区域。 总的来说，有序边表法是一种比较简单易懂的多边形扫描线填充算法，但由于需要维护有序边表和活动边表，算法效率较低，不适用于处理大规模的多边形区域。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值