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

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

Javascript: DOM相关内容速查手册; [转]JS宝典学习笔记; 背景，文字渐变（无闪屏）; 一个仿DOS的Loading效果; JavaScript使用prototype定义对象类型; 如何用JS获取带“\”字符串的中间值？; 如何识别上传前检测的图像是有效的方法; js模拟滤镜的图片渐显效果; 如何用javascript去掉字符串里的所有空格; javascript如何判断数组内元素是否重复的方法集锦; 控制打印时页眉角的代码; 模仿Flash AS效果的导航菜单; 页面自定义拖拽布局; js判断浏览器的比较全的代码; 又一日历输入效果没考虑兼容性，IE通过; 项目添加; [转]prototype 源码解读超强推荐; JAVASCRIPT对象及属性; JavaScript解决Joseph问题; 实例：用 JavaScript 来操作字符串(一些字符串函数)

No. « ‹ 48 49 50 51 › »

技术文章搜索

关键字

Javascript 中的 javascript 绘制矩形框

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

收藏到网摘: 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