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

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

Javascript: 一个js写的日历（代码部分网摘）; IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结; jquery 子窗口操作父窗口的代码; 用JavaScript隐藏控件的方法; js 冒泡事件与事件监听使用分析; ie与ff下的event事件; 比较全面的event对像在IE与FF中的区别推荐; js 获取中文拼音,Select自动匹配字母获取值的代码; JavaScript 变量命名规则; 没有form表单情况下敲回车键提交表单的js代码; jQuery 使用手册(四); jQuery 使用手册(六); jQuery 使用手册(七); Javascript 数组添加一个 indexOf 方法的实现代码; Javascript 数组添加 shuffle 方法的实现代码; Javascript 两个窗体之间传值实现代码; Javascript showModalDialog两个窗体之间传值; js 覆盖和重载函数; JavaScript中Object和Function的关系小结; javascript parseInt 大改造

No. « ‹ 186 187 188 189 › »

技术文章搜索

关键字

Javascript 中的 javascript 绘制矩形框

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

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