在图像上绘制矩形

Draw rectangle over a image

本文关键字：绘制 图像      更新时间：2023-09-26

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

我试图显示不同的变量，但这是不正确的。请帮助我显示矩形的坐标。

你欠我一杯啤酒：

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

假设一个名为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;
相关文章：