I have Html/Css/Javascript Code that make rectangle into an image , everything goes looking good! but when use onmousemove event for create rectangle my function goes crazy ! in this script if you point somewhere in image it draw a rectangle for you if clicked it will be fixed and if use escape key all cleared. the problem is when I use on mouse move event the rectangle sometime good sometime point another place!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Units px/in test</title>
<meta name="description" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<style>
.wrapper {
position:relative;
}
.boxOnImage {
display: none;
position:absolute;
border:2px solid #ff6666;
background-color:transparent
}
</style>
<div id="imageMeasurement" class="wrapper">
<img id="innerImage" src="https://www.w3schools.com/html/img_chania.jpg"/>
<div id="boxOnImage" class="boxOnImage"></div>
</div>
<script>
(function () {
var xs = -1;
var ys = -1;
var xe = -1;
var ye = -1;
var imageMeasurement = document.getElementById("imageMeasurement");
var box = document.getElementById("boxOnImage");
function isInImage(x, y) {
var innerImage = document.getElementById("innerImage");
if (innerImage.offsetHeight < y || innerImage.offsetWidth < x) {
return false
} else {
return true;
}
}
imageMeasurement.addEventListener("mousemove", function (e) {
var x = e.offsetX;
var y = e.offsetY;
if (isInImage(x, y)) {
if ((xe == -1 && ye == -1) && (xs != -1 && ys != -1)) {
createRectangleOnImage(xs, x, ys, y);
}
}
});
imageMeasurement.addEventListener("click", function (e) {
var x = e.offsetX;
var y = e.offsetY;
if (isInImage(x, y)) {
if (xs == -1 && ys == -1) {
xs = x;
ys = y;
} else if (xe == -1 && ye == -1) {
xe = x;
ye = y;
createRectangleOnImage(xs, xe, ys, ye);
} else {
xe = x;
ye = y;
createRectangleOnImage(xs, xe, ys, ye);
}
}
});
document.addEventListener("keyup", function (e) {
//27 escape key Code!
if (e.keyCode == 27) {
xs = -1;
ys = -1;
xe = -1;
ye = -1;
removeRectangleOnImage();
}
});
function createRectangleOnImage(xs, xe, ys, ye) {
if (box.style.display != 'block') {
box.style.display = 'block';
}
var top = 0;
var left = 0;
var width = 0;
var height = 0;
if (ys > ye) {
height = (ys - ye);
top = ye;
} else {
height = (ye - ys);
top = ys;
}
if (xs > xe) {
width = (xs - xe);
left = xe;
} else {
width = (xe - xs);
left = xs;
}
box.style.top = Number(top) + "px";
box.style.left = Number(left) + "px";
box.style.width = Number(width) + "px";
box.style.height = Number(height) + "px";
}
function removeRectangleOnImage() {
box.style.display = "none";
}
})();
</script>
</body>
</html>