javascript 繪制矩形框

2019-11-21 01:24:04

字體：大中小

來源：轉載

供稿：網友

如果不考慮把整個代碼封裝起來，大約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   class="iwvjtn8m0"   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 全選注:如需引入外部Js需刷新才能執行]

上一篇：純JS 繪制數學函數

下一篇：使用自定義setTimeout和setInterval使之可以傳遞參數和對象參數