Question

我开发了一个页面，可以动态导入图像并将其显示在div标签内。现在我想在图像上绘制一个矩形，它应该从图像上的任何一点开始。

我引用了许多消息来源，并尝试从中实施该想法。

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

   <div class="imageside" id="picture"> </div>
   <div ID="rubberBand"></div>

在上面的代码中，图像显示在div id“ picture”。直到这部分代码正常为止。

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

 picture= getpicture();

 function getpicture(){
 pic= document.getElementById('picture')
 pic.innerHTML= getgImage(event.target.dataset.number);

 }

 function startRubber (evt) {
 var ev = evt || window.event,
  rs = rubber.style,
  bb = pic.innerHTML.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');

  pic = document.getElementById('picture').innerHTML;

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

在上面的代码中，函数getpicture（）负责动态显示图像。当我执行上述代码时，图像显示在页面上，但是我无法在图像上绘制矩形。在控制台中，没有错误。有人可以帮我解决问题，并帮助我在图像上绘制矩形。

Answer 1

检查一下。

https://jsfiddle.net/2at9n7ye/3/

您的问题是，在加载pic变量之前，您正在访问它。

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

picture = getpicture();

function getpicture() {
  pic = document.getElementById('picture');
  pic.innerHTML = "<img src='https://i.imgur.com/mvMlmMb.jpg' id='img' width='100px' height='100px'/>";

}

function startRubber(evt) {
  var ev = evt || window.event,
    rs = rubber.style,
    bb = pic.getBoundingClientRect
  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';
}

(function() {
  rubber = document.getElementById('rubberBand');
  pic = document.getElementById('picture');
  pic.addEventListener("mousedown", startRubber);
  document.addEventListener("mouseup", stopRubber);
  document.addEventListener("mousemove", moveRubber);
})();

如何在div内部存在的图像上方绘制矩形框？

1 个答案: