<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/5.css"/>
	</head>
	<body>
		<div id="print"></div>
		<div id="content">
			<label for="long">长度：</label><input type="text" id="long"/>
			<hr />
			<button class="draw">画线</button>
			<hr />
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/se.js"></script>
		<script type="text/javascript">
		//动态创建svg标签，添加属性，同时添加入body
			var svgns = "http://www.w3.org/2000/svg";   
			$.svg = function $svg(tagName) {   
   				return $(document.createElementNS(svgns, tagName));   
			};  
			var svg = $.svg('svg')
	        svg.css("height",'600').css("width",'600').appendTo('#print') ;         
	        var input = $('input')
	        var data = [] //数据：多边形自身节点
	      
		
			//所有线
			var lines = []
	
        	//画线
        	$('.draw').on('click',function(){
				//起点,终点,切割线
		        var begin= []
		        var last= []
				svg.on('mousedown',function(e){
				        var line=$.svg('line')
				        line.css('stroke','black').css('stroke-width','10').appendTo(svg)
				    //绑定鼠标移动事件，给line标签添加属性
		        	svg.on('mousemove',function(en){
		        		//添加起点
			        	line.attr("x1",e.offsetX).attr("y1",e.offsetY) 
			        	begin = [e.offsetX,e.offsetY]
			        	
			        	//添加终点
		        		line.attr("x2",en.offsetX).attr("y2",en.offsetY); 
		        		last = [en.offsetX,en.offsetY]
		        		
		        		//横坐标的平方
		        		var row = Math.pow(en.offsetX - e.offsetX,2)
		        		//纵坐标
		        		var col = Math.pow(en.offsetY - e.offsetY,2)
//			        		console.log(row,col)
		        		input.val(Math.sqrt(row+col));
		        	})
		      	})
				var nodes= []
				var dataNew = []
		       	svg.on('mouseup',function(e){
					
		       		$(document).unbind('mousemove')

				})
        	})
		
		</script>
	</body>
</html>