用js绘制矩形框
来源:互联网 发布:网络歌曲大全2017 编辑:程序博客网 时间:2024/05/29 18:07
今天读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>
- 用js绘制矩形框
- 用js绘制矩形框
- 绘制矩形框 OpenCV
- MFC 鼠标绘制矩形框
- 用canvas实现鼠标拖动绘制矩形框
- 绘制矩形
- HTML+js实现鼠标绘制可拖动矩形
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- 矩形框绘制_运动检测_OpenCV
- 矩形框绘制_运动检测_OpenCV
- win32 sdk绘制矩形选择框
- android绘制矩形框-不要描边
- C# 绘制50000个矩形框
- HTML5教程-用Canvas标签绘制矩形
- [OpenGL]用OpenGL图形的绘制--矩形
- 用Pygame绘制移动的矩形
- 用鼠标在窗口中绘制矩形
- 教你用canvas绘制矩形
- 【教训】wine 找不到MFC42.dll问题 wine cannot find MFC42.dll
- C++ static 变量使用
- sql server 2005中with ties的使用
- 时间相减
- 大秦帝国(经典台词)
- 用js绘制矩形框
- GridView中导出表格的代码
- IBATIS配置文件sqlmap-config.xml之乱配
- 一些CSS错误及解决办法
- 字符串哈希算法比较(转载)
- 《设计模式之禅》学习之策略模式
- Shell脚本编程剖析
- QT 无法解析的外部符号 QUiLoader::~QUiLoader l QUiLoader::QUiLoader 原来是没有QtUiTools.lib
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用。