在JavaScript中在图像上拖动和绘制矩形的解决方案

最新推荐文章于 2022-04-16 20:34:28 发布

cxygs5788

最新推荐文章于 2022-04-16 20:34:28 发布

阅读量286

点赞数

文章标签： javascript ViewUI

经过数小时的搜索和编码，我终于有了一个在图像上拖动和绘制矩形的代码。我从将近2年的帖子中粘贴了大部分代码，并对它做了一些补丁工作。现在，它可以同时使用Firefox和IE7。但是使用IE7，它有一个小缺陷……但仍然可以使用。我将在回答后尽快尝试发布补丁。你们来了


<HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE> 
</TITLE>
<STYLE>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</STYLE> 
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="VK.jpg" height=400
width=400>  
<DIV ID="rubberBand"></DIV> 
<SCRIPT> 
var IMG; 
function startRubber (evt) {
if (document.all) {
// IE
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
} 
function cancelDragDrop()
{
window.event.returnValue = false;
} 
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber; 
</SCRIPT>
</BODY>
</HTML>