在模态内部的图像上绘制边界框

Question

我是JavaScript初学者，正在编写一个小代码，在该代码中，我在模态中显示了一个图像，并试图在图像上绘制一个边界框。

我已经尝试使用以下代码在图像上绘制边界框。

Html：(显示图像的模态代码(

<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">&times;</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<img class="modal-content" id="img01">
</div>
</div>

Javascript：(我试图在图像上画一个边界框的逻辑(

initDraw(document.getElementById('imgarea'));
function initDraw(imgarea) {
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var element = null;
imgarea.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
imagearea.onmouseup = function (e) {
if (element !== null) {
element = null;
imagearea.style.cursor = "default";
console.log("finsihed.");
} }
imagearea.onmousedown = function (e) {
if(element==null){
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
imagearea.appendChild(element)
imagearea.style.cursor = "crosshair";
e.preventDefault();
}
}
}

css：(用于边界框(

.rectangle {
border: 10px solid red;
position: absolute;
}
.imagearea {
display: flex;
flex-direction: column;
float: left;
width: 35%;
max-width: 700px;
position: relative;
}
#img01{
position: absolute;
}

上面的代码以模态显示图像，当我试图在图像上绘制边界框时，光标会按预期变为十字线，但当我在图像上画边界框时我看不到它。只是光标发生了变化，但我在图像上绘制的矩形(边界框(不可见。

有人能帮我吗。谢谢

Answer 1

有两个问题。

1. 不能将子级附加到<img>。

2. 您的计算是基于视口的，而边框的CSS是相对于图像的。有多种方法可以解决这个问题，最快的方法是从鼠标位置减去图像的位置，比如：

function setMousePosition(e) {
// your mouse calculations
const boundaries = e.currentTarget.getBoundingClientRect();
mouse.x -= boundaries.left;
mouse.y -= boundaries.top;
}

此外，请确保在mousedown处理程序中使用setMousePosition()。