JS绘图矩形。无法在旧矩形上重绘

我编辑了标题。另外，如果我尝试再次拖动正在绘制的矩形以缩小它，它将不会更新。我认为问题与矩形是与图像不同的元素（可能是小孩）的事实有关，所以也许解决方案是为孩子们举办相同的活动？我试图做这样的事情，但仍然有问题。随意更改代码中的任何内容。JS绘图矩形。无法在旧矩形上重绘

<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>

来源

2013-07-23 Abdul Rahim Haddad

你为什么显示在客户端的问题，您的服务器端代码？ –

我包括的是html和javascript。他们不都是客户端吗？ –

OK - 正在发生的事情是，你的DIV阻止鼠标事件到达IMG，因此，所有你需要做的是禁用对CSS的股利鼠标事件，就大功告成了：

<STYLE> 
#rubberBand { 
    position: absolute; 
    visibility: hidden; 
    width: 0px; height: 0px; 
    border: 2px solid red; 
    pointer-events:none; 
} 
</STYLE>

编号：Ignore mouse interaction on overlay image

来源

2013-07-23 20:09:41

JS绘图矩形。无法在旧矩形上重绘

回答

相关问题