javascript 绘制矩形框- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 绘制矩形框

Javascript: Prototype ObjectRange对象学习; Prototype Number对象学习; Prototype Enumerable对象学习; Prototype Template对象学习; Prototype PeriodicalExecuter对象学习; Prototype Array对象学习; Prototype Hash对象学习; [原创]IE view-source 无法查看看源码 JavaScript看网页源码; js计算页面刷新的次数; 一个cssQuery对象 javascript脚本实现代码; 一个可以随意添加多个序列的tag函数; javascript 三级下拉选择菜单Levels对象; JavaScript 进度条实现代码(Firefox等相似浏览器下不支持); javascript 表单规则集合对象; 从基础开始建立一个JS代码库; javascript Base类包含基本的方法; js 代码集(学习js的朋友可以看下); 模仿jQuery each函数的链式调用; JavaScript 就地编辑HTML节点实现代码; JavaScript 动态生成方法的例子

No. « ‹ 147 148 149 150 › »

技术文章搜索

关键字

Javascript 中的 javascript 绘制矩形框

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 420 ::

收藏到网摘: n/a

使用自定义setTimeout和setInterval使之可以传递参数和对象参数纯JS 绘制数学函数

今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单如果不考虑把整个代码封装起来，大约5分钟里也可以写出类似的效果，为了把整个代码封装成一个对象，稍微借鉴了Pro Javascript Techniques书中的代例子的风格。
Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

点击运行可以看到效果:

<html>
<head>
<title>Rect</title>
<style type="text/css">
</style>
<script type="text/javascript">
var Rect = { //当前正在画的矩形对象
obj: null,
//画布
container: null,
//初始化函数
init: function(containerId){
Rect.container = document.getElementById(containerId);
if(Rect.container){ //鼠标按下时开始画
Rect.container.onmousedown = Rect.start;
}
else{
alert('You should specify a valid container!');
}
},
start: function(e){
var o = Rect.obj = document.createElement('div');
o.style.position = "absolute";
// mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置
o.style.left = o.mouseBeginX = Rect.getEvent(e).x;
o.style.top = o.mouseBeginY = Rect.getEvent(e).y;
o.style.height = 0;
o.style.width = 0;
o.style.border = "dotted black 1px";
//向o添加一个叉叉，点击叉叉可以删除这个矩形
var deleteLink = document.createElement('a');
deleteLink.href="#";
deleteLink.onclick = function(){ Rect.container.removeChild(this.parentNode); //this.parentNode.style.display = "none"; //alert(this.tagName);
}
deleteLink.innerText = "x";
o.appendChild(deleteLink);
//把当前画出的对象加入到画布中
Rect.container.appendChild(o);
//处理onmousemove事件
Rect.container.onmousemove = Rect.move;
//处理onmouseup事件
Rect.container.onmouseup = Rect.end;
},
move: function(e){
var o = Rect.obj;
//dx，dy是鼠标移动的距离
var dx = Rect.getEvent(e).x - o.mouseBeginX;
var dy = Rect.getEvent(e).y - o.mouseBeginY;
//如果dx，dy <0,说明鼠标朝左上角移动，需要做特别的处理
if(dx<0){
o.style.left = Rect.getEvent(e).x;
}
if(dy<0){
o.style.top = Rect.getEvent(e).y;
}
o.style.height = Math.abs(dy);
o.style.width = Math.abs(dx);
},
end: function(e){ //onmouseup时释放onmousemove，onmouseup事件句柄
Rect.container.onmousemove = null;
Rect.container.onmouseup = null;
Rect.obj = null;
},
//辅助方法，处理IE和FF不同的事件模型
getEvent: function(e){ if (typeof e == 'undefined'){ e = window.event; } //alert(e.x?e.x : e.layerX); if(typeof e.x == 'undefined'){ e.x = e.layerX; } if(typeof e.y == 'undefined'){ e.y = e.layerY; } return e; }
}; </script>
</head>
<body>
<div id="main" style="border: solid red 1px; height:90%; width:60%; curssor: default;"></div>
增加一个按钮，可以关闭绘画效果，用来配合测试删除功能
<input type="button" value="停止绘画" id="t"/>
</body>
<script type="text/javascript">
//测试代码开始
//初始化
Rect.init("main");
document.getElementById('t').onclick = function(){ Rect.container.onmousedown = null;
}; </script>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

使用自定义setTimeout和setInterval使之可以传递参数和对象参数纯JS 绘制数学函数

Javascript 中的 javascript 绘制矩形框

评论 (0) All