在圖像上繪製矩形

我正在做一個項目，用於在圖像上繪製矩形框並查找矩形的座標。我使用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>

我如何在形式(x1,y1)(x2,y2)顯示矩形的座標。這是左上角和右下角座標，最後是左右角。

我試圖顯示不同的變量，但它是不正確的。請幫助我的任何人顯示矩形的座標。

來源

2012-02-22 Vineeth

考慮使用一些JavaScript框架，如jQuery，MooTools的嚮往之......它讓生活變得更加簡單。 – zeroos 2012-02-21 19:05:21

這與您提出的最後兩個問題有什麼不同？ http://stackoverflow.com/questions/9397104/javascript-for-draw-rectangle-over-a-image和http://stackoverflow.com/questions/9383337/drag-and-draw-rectangles-on-an- image-in-javascript – j08691 2012-02-22 16:28:48

獲取的座標是容易的，假設你有一個變量的橡皮元素稱爲rectangle：

var x1 = rectangle.style.left; 
var y1 = rectangle.style.top; 
var x2 = x1 + rectangle.style.width; 
var y2 = y1 + rectangle.style.height;

如果你想顯示他們指定的格式在頁面上，請嘗試以下（假設你有一個輸出元素與output一個id：

var coords = '(' + x1 + ',' + y1 + ')(' + + x2 + ',' + y2 + ')'; 
document.getElementById('output').innerHTML = coords;

來源

2012-02-22 16:31:47 beeglebug

我在哪裏添加此代碼.. – Vineeth 2012-02-22 16:34:53

**長答案（如果你在乎）：**給出每次鼠標移動時座標都會改變，邏輯位置在你現有的'onmousemove'函數內（moverubber），這樣，當盒子移動時，座標將始終保持最新。 **簡短的回答（如果你只是想複製/粘貼）：**把它放在移動橡膠回覆錯誤之前。 – beeglebug 2012-02-22 17:31:45

你有種欠我一個啤酒這一個：

var IMG, rubber, pt = { x: 0, y: 0 }; 

function startRubber (evt) { 
    var ev = evt || window.event, 
     rs = rubber.style, 
     bb = IMG.getBoundingClientRect(); 
    console.dir(ev); 
    rs.left = bb.left + 'px'; 
    rs.top = bb.top + 'px'; 
    rs.width = bb.width + 'px'; 
    rs.height = bb.height + 'px'; 
    rs.display = 'block'; 
    pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top }; 
    return false; 
} 

function stopRubber() { 
    rubber.style.display = 'none'; 
} 

function moveRubber (evt) { 
    var ev = evt || window.event; 
    rubber.style.left = (evt.clientX - pt.x) + 'px'; 
    rubber.style.top = (evt.clientY - pt.y) + 'px'; 
} 

rubber = document.getElementById('rubberBand'); 

IMG = document.getElementById('myImage'); 

IMG.onmousedown = startRubber; 
document.onmouseup = stopRubber; 
document.onmousemove = moveRubber;

試驗檯：http://jsbin.com/ojaxew/edit

希望這有助於-ck

來源

2012-02-22 16:33:47 ckozl

在圖像上繪製矩形

回答

相關問題