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

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

Javascript: javascript秒数倒计时自动跳转代码; js动态生成按钮并动态生成8位随机数; JS旋转图片阵类; javascript md5加密代码; window.onload的页面加载技巧; javascript显示隐藏层比较不错的方法分析; javascript优先加载笔记代码; JavaScript for in锚点的动态创建; 初学JavaScript第二章; javascript类型File的Input按钮功能研究; JavaScript下申明对象的几种方法小结; 一个jquery的弹出层的插件; IE与firefox之jquery用法区别; 判断JavaScript对象是否可用的最正确方法分析; javascript布局查看器效果代码; js模拟画笔效果; 无废话JavaScript教程(全集); 执行iframe中的javascript方法; 解决function函数内的循环变量; jQuery弹出层插件简化版代码

No. « ‹ 111 112 113 114 › »

技术文章搜索

关键字

Javascript 中的 javascript 绘制矩形框

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

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