在图像上绘制矩形

我正在做一个项目，用于在图像上绘制矩形框并查找矩形的坐标。我使用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

在图像上绘制矩形

回答

相关问题