jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Fix bounding box display

Browse Source 
Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
This commit is contained in:
James Ketrenos 2020-01-05 22:11:22 -08:00
parent c234abbcc2
commit 0fc593e8ab
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/face-explorer.html
View File

@ -132,27 +132,27 @@ function makeFaceBoxes() {
let width, height, offsetLeft = 0, offsetTop = 0; let width, height, offsetLeft = 0, offsetTop = 0;
/* If photo is wider than viewport, it will be 100% width and < 100% height */ /* If photo is wider than viewport, it will be 100% width and < 100% height */
if (photo.width / photo.height > el.offsetWidth / el.offsetHeight) { if (photo.width / photo.height > document.body.offsetWidth / document.body.offsetHeight) {
width = 100; width = 100;
height = 100 * photo.height / photo.width * el.offsetWidth / el.offsetHeight; height = 100 * photo.height / photo.width * document.body.offsetWidth / document.body.offsetHeight;
offsetLeft = 0; offsetLeft = 0;
offsetTop = (100 - height) * 0.5; offsetTop = (100 - height) * 0.5;
} else { } else {
width = 100 * photo.width / photo.height * el.offsetHeight / el.offsetWidth; width = 100 * photo.width / photo.height * document.body.offsetHeight / document.body.offsetWidth;
height = 100; height = 100;
offsetLeft = (100 - width) * 0.5; offsetLeft = (100 - width) * 0.5;
offsetTop = 0; offsetTop = 0;
} }
photo.faces.forEach((face) => { photo.faces.forEach((face) => {
const box = document.createElement("div"); const box = document.createElement("div");
box.classList.add("face"); box.classList.add("face");
document.body.appendChild(box); document.body.appendChild(box);
box.style.left = offsetLeft + Math.floor(face.left * width) + "%"; box.style.left = offsetLeft + face.left * width + "%";
box.style.top = offsetTop + Math.floor(face.top * height) + "%"; box.style.top = offsetTop + face.top * height + "%";
box.style.width = Math.floor((face.right - face.left) * width) + "%"; box.style.width = ((face.right - face.left) * width) + "%";
box.style.height = Math.floor((face.bottom - face.top) * height) + "%"; box.style.height = ((face.bottom - face.top) * height) + "%";
box.addEventListener("click", (event) => { box.addEventListener("click", (event) => {
setPause(true); setPause(true);