javascript在圖像上繪製矩形

-1

我正在做一個使用java腳本的php項目。我嘗試在使用javascript的圖像上繪製矩形。矩形可以繪製任何尺寸的圖像，與任何圖像比較尺寸也顯示繪圖的共同座標rectangle.Please任何一個可以幫助我...我嘗試不同的方法.....javascript在圖像上繪製矩形

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

</HEAD> 
<BODY> 
<img name="myImage" id="myImage" src="a.jpg"> 


<DIV ID="rubberBand"></DIV> 

<SCRIPT> 

var IMG; 

    function startRubber (evt) { 
    if (document.all) { 

     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>

來源

2012-02-22 Vineeth

你嘗試過什麼辦法呢？調整大小的圖像？帆布？閃？ – 2012-02-22 14:53:42

顯示你的嘗試，我們會盡力幫助解決它。但我們不會爲您編寫代碼。 – 2012-02-22 14:54:02

你試過這些不同的方式是什麼？你如何加載圖像？這是客戶端JavaScript嗎？你需要有完整的跨瀏覽器兼容性嗎？ – Ryan 2012-02-22 14:54:28

您需要的包裝，所以你可以絕對位置的元素裏面。尺寸會有所不同，具體取決於您的照片和您想要的框。

HTML：

<div class="wrapper"> 
    <img src="...." /> 
    <div class="box"></div> 
</div>

CSS：

.wrapper { 
    position:relative; 
} 

.box { 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:50px; 
    height:50px; 
    border:2px solid #ffffff; 
    background-color:transparent 
}

來源

2012-02-22 14:56:48

javascript在圖像上繪製矩形

回答

相關問題