I am a JavaScript beginner and currently working on a small code project that involves displaying an image inside a modal. I am attempting to draw a bounding box over the image.
Below is the code snippet I've used to try drawing the bounding box:
HTML: (modal code for displaying the image)
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<img class="modal-content" id="img01">
</div>
</div>
Javascript: (logic attempted for drawing the bounding box over the image)
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("finished.");
} }
imagearea.onmousedown = function (e) {
if(element==null){
console.log("started.");
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: (for styling the bounding box)
.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;
}
The above code successfully displays the image in a modal, and when trying to draw the bounding box, the cursor changes to crosshair as intended. However, the issue I'm encountering is that the bounding box I draw over the image is not visible, even though the cursor changes. Any help or guidance would be greatly appreciated. Thank you!