Question

我正在做一个项目，用于在图像上绘制一个矩形框并找到矩形的坐标。我正在使用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)格式显示矩形的坐标。这是左上角和右上角坐标，左上角和右上角。

我试图显示不同的变量，但它不正确。请帮我任何人显示矩形的坐标。

Answer 1

你欠我一杯啤酒：

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

希望这有助于确认

Answer 2

假设在名为rectangle的变量中有rubberband元素，则很容易获得坐标：

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

如果要以指定的格式在页面上显示它们，请尝试以下操作（假设您的输出元素的ID为output：

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

在图像上绘制矩形

2 个答案: