js两条直线（可自动延伸）的交点坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			svg{
				background: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			//动态创建svg标签，添加属性，同时添加入body
			var svg=document.createElementNS('http://www.w3.org/2000/svg','svg'); 
	        svg.setAttribute("height",'600'); 
	        svg.setAttribute("width",'600'); 
	        var body=document.getElementsByTagName('body')[0]; 
	        body.appendChild(svg); 
	        
	        //起点
	        var begin = []
	        var begins = []
	        //终点
	        var last = []
	        var lasts = []
	        //绑定鼠标落下事件，同时创建line标签，添加入svg
	        svg.onmousedown = function(e){
			        var line=document.createElementNS('http://www.w3.org/2000/svg','line'); 
			        line.style.stroke='black'
			        svg.appendChild(line); 
			    //绑定鼠标移动事件，给line标签添加属性
	        	document.onmousemove = function(en){
	        		//添加起点
		        	line.setAttribute("x1",e.offsetX); 
		        	line.setAttribute("y1",e.offsetY); 
		        	begin = [e.offsetX,e.offsetY]
		        	
		        	//添加终点
	        		line.setAttribute("x2",en.offsetX); 
	        		line.setAttribute("y2",en.offsetY); 
	        		last = [en.offsetX,en.offsetY]
	        	}
	        }
	        //绑定鼠标抬起时，清除鼠标移动事件
	       	svg.onmouseup = function(e){
	       		document.onmousemove = null	
	       		//所有起点
	       		begins.push(begin)
//	       		console.log(begins)
	       		//所有终点
	       		lasts.push(last)
//	       		console.log(lasts)
				//起点和终点交叉组合
				var points = []
	       		for(var i = 0 ; i < begins.length; i++){
	       			//线
	       			var line = []
	       			line.push(begins[i],lasts[i])
	       			points.push(line)
	       		}
	       		
	        	
       			var line = []
				line.push(begins[0],lasts[0])
       			points.push(line)
				console.log(points)
				
				//交点
				var nodes = []
				for(var i = 0;i<points.length-1;i++){
					console.log(points[i+1])
	        		var a={
						x:Number(points[i][0][0]),
						y:Number(points[i][0][1])
					}
					var b={
						x:Number(points[i][1][0]),
						y:Number(points[i][1][1])
					}
					var c={
						x:Number(points[i+1][0][0]),
						y:Number(points[i+1][0][1])
					}
					var d={
						x:Number(points[i+1][1][0]),
						y:Number(points[i+1][1][1])
					}
//					console.log(a,b,c,d)

					function point(a,b,c,d){
						var k0 = (b.y-a.y)/(b.x-a.x)
//						console.log(k0)
						var e = (b.y - k0*b.x)
//						console.log(e)
						var k1 = (d.y-c.y)/(d.x-c.x)
//						console.log(k1)
						var e1 = (d.y - k1*d.x)
//						console.log(e1)
						var x = (e1-e)/(k0-k1)
						var y = k0*x + e
						
//						console.log('交点横坐标'+x)
//						console.log('交点纵坐标'+y)
						
						return {x:(e1-e)/(k0-k1),y:k0*x + e}
					}
					point(a,b,c,d)
					nodes.push(point(a,b,c,d))
	        	}
				console.log(nodes)
				console.log(JSON.stringify(nodes))
	       	}
	        
		</script>
	</body>
</html>
js两条直线（可自动延伸）的交点坐标

猜你喜欢
