使用div实现了选取框效果.
代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myCanvasTest</title> 5 <style type="text/css"> 6 #selection{ 7 border: 3px red solid; 8 display: none; 9 position: absolute; 10 } 11 *{ 12 cursor: crosshair; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="selection"></div> 18 </body> 19 <script type="text/javascript"> 20 var selection, //存储坐标量(方便用) 21 flag = false, //作为是否在鼠标点击时的移动标记 22 selectionDiv = document.getElementById("selection"); //获取选取框div对象 23 24 //初始化坐标对象 25 function init () { 26 selection = { 27 top :0, 28 left :0, 29 width :0, 30 height :0 31 }; 32 } 33 34 //鼠标按下,记录坐标 35 function setLocation (x, y) { 36 selection.left = x; 37 selection.top = y; 38 } 39 40 //鼠标移动计算距离存入宽高 41 function moveLocation (x, y) { 42 selection.width = selection.left - x; 43 selection.height = selection.top - y; 44 moveIt(); 45 } 46 47 //更新div坐标尺寸信息 48 function moveIt () { 49 console.log(selection); 50 //高度宽度小于0时说明拖拽x,y为正值,如小于0说明拖动为反方向.需重新计算top及left保证拖拽效果 51 selectionDiv.style.top = (selection.height < 0 ? 52 selection.top : 53 selection.top - selection.height) 54 + "px"; 55 selectionDiv.style.left = (selection.width < 0 ? 56 selection.left : 57 selection.left - selection.width) 58 + "px"; 59 //Math.abs()方法返回绝对值 60 selectionDiv.style.width = Math.abs(selection.width) 61 + "px"; 62 selectionDiv.style.height = Math.abs(selection.height) 63 + "px"; 64 } 65 66 //显示选取框div 67 function showIt () { 68 selectionDiv.style.display = "block"; 69 } 70 71 //隐藏选取框div 72 function hideIt () { 73 selectionDiv.style.display = "none"; 74 } 75 76 //鼠标按下触发事件 77 window.onmousedown = function (e) { 78 var x = e.clientX, 79 y = e.clientY; 80 //初始化坐标对象 81 init(); 82 //显示div对象 83 showIt(); 84 //设置top,left值.作为本次拖拽的原点 85 setLocation(x, y); 86 //调用移动方法 87 moveIt(); 88 //将标记打开 89 flag = true; 90 } 91 92 //鼠标移动时触发 93 window.onmousemove = function (e) { 94 var x = e.clientX, 95 y = e.clientY; 96 //当标记开启时,触发事件 97 if(flag) 98 moveLocation(x, y); 99 } 100 101 //鼠标抬起,触发事件,将div隐藏,清除坐标对象,关闭标记 102 window.onmouseup = function (e) { 103 //隐藏div 104 hideIt(); 105 //清除坐标信息 106 init(); 107 //关闭标记 108 flag = false; 109 } 110 111 </script> 112 </html>
感觉在编码的时候.卡在了x,y都为负值的地方.
为了保证在x,y都为负值时还有拖拽效果.必须要将div的位置移动.
看起来就像拖拽一样.实则在更新大小的同时更新了div的坐标位置