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繪圖矩形。無法在舊矩形上重繪

回答

相關問題