javascript鼠标拖曳画圆和矩形

最新推荐文章于 2022-09-05 20:43:51 发布

useebao

最新推荐文章于 2022-09-05 20:43:51 发布

阅读量405

点赞数

文章标签： JavaScript 360 XHTML HTML ViewUI


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled 1</title>  
<style type="text/css">  
.style1 {  
    font-size: x-small;  
}  
</style> 
<script type="text/javascript">  
/**
	画点
*/	
function makedot(x, y){ 
  pointDiv = "<div style='height:1px;position:absolute;left:" + x +
  	"px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>"; 
  return pointDiv;
}
/**  
  函数功能：根据给定的圆心和半径画圆  
  函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。  
*/  
function circle(x,y,r){  //(x,y)圆心，r半径  
  var dotx,doty,radio;  
  var Pi = Math.PI;  
  var points = "";
  points += makedot(x, y);  
  for(var i = 0;i < 360;i += 0.5){  
    radio = i * Pi / 180;  
    dotx = r * Math.cos(radio) + x;  
    doty = r * Math.sin(radio) + y  
    points += makedot(dotx, doty);  
  } 
  var container = document.getElementById("container");
  container.innerHTML = points; 
}
/**  
  函数功能：根据指点矩形左上角坐标及长宽绘制矩形。  
  函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标  
*/  
function rect(x,y,w,h){  //(x,y)左上角坐标,w,h 宽与高 
	var points = ""; 
  for(var i = 0;i < w;i ++){  
    points += makedot(x + i,y);  
    points += makedot(x + i,y + h);  
  }  
  for(var i = 0;i < h;i ++){  
    points += makedot(x, y + i);  
    points += makedot(x + w, y + i);  
  }  
  var container = document.getElementById("container");
  container.innerHTML = points;
}
/**
	获取鼠标位置
*/
function mousePosition(ev){
	ev = ev || window.event;
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	var doc = document.documentElement, body = document.body;
	var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
	var pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);        
	return {x:pageX, y:pageY};
}

//开始点坐标
var startPoint = null;
//记录鼠标事件
var moveEvent;
var upEvent;
/**
	记录开始点，注册鼠标事件
*/
function recordPoint(ev){

	var point = mousePosition(ev);
	startPoint = point;

	moveEvent = document.body.onmousemove;
	upEvent = document.body.onmouseup;

	if(document.getElementById("circle").checked){
		document.body.onmousemove = drawCircle;
	}
	else {
		document.body.onmousemove = drawRect;
	}
	document.body.onmouseup  = endDraw;
}
/**
	画圆形
*/
function drawCircle(ev){	
	var point = mousePosition(ev);
	var tx = point.x - startPoint.x;
	var ty = point.y - startPoint.y;
	tx *= tx;
	ty *= ty;
	var r = Math.sqrt(tx + ty);
	circle (startPoint.x, startPoint.y, r);
}
/**
	画矩形
*/
function drawRect(ev){
	var point = mousePosition(ev); 
	rect(startPoint.x, startPoint.y, Math.abs(point.x - startPoint.x), Math.abs(point.y - startPoint.y));
}
/**
	结束动作
*/
function endDraw(){
	document.body.onmousemove  = moveEvent;
	document.body.onmouseup  = upEvent;
}

</script>
</head>  

<body>  
	<input type="radio" id="circle" name="type" value="1" checked/>圆
	<input type="radio" name="type" value="2" />矩形
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onmousedown="recordPoint(event);" >

</div>

</body>  

</html>