javascript鼠标拖曳画圆跟矩形
日期：2014-05-16 浏览次数：20505 次
javascript鼠标拖曳画圆和矩形
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
