From aea4c3305da1341e4a1f2cc61dd0fd70b4ba0339 Mon Sep 17 00:00:00 2001 From: Keillion <735699921@qq.com> Date: Wed, 24 May 2023 17:42:17 +0800 Subject: [PATCH 1/5] Update 3.show-result-texts-on-the-video.html --- 4.use-case/3.show-result-texts-on-the-video.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 2f22b219..1ef795f4 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -25,7 +25,7 @@ word-break: break-all; word-wrap: break-word; box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2); - transform: translate(-50%, -4px); + transform: translate(-50%, calc(-100% - 4px)); } .bubble-box::after{ content: ''; @@ -116,7 +116,7 @@ if (bodyStyle.position === "static") { Object.assign(divInf.style, { left: `${(convertedP1.x + convertedP2.x) / 2}px`, - bottom: `${document.documentElement.clientHeight - convertedP1.y}px`, + top: `${convertedP1.y}px`, }); } else { // if you set body `position` as `relative`, `absolute`, things can get complicated const bodyRect = document.body.getBoundingClientRect(); @@ -124,7 +124,7 @@ const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth); Object.assign(divInf.style, { left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, - bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`, + top: `${convertedP1.y - bodyRect.top - bodyBorderBottom}px`, }); } divInf.innerText = result.barcodeText; From 82b2f2da3b7020a412cb63f7b58819d524a410f4 Mon Sep 17 00:00:00 2001 From: Keillion <735699921@qq.com> Date: Wed, 24 May 2023 17:47:48 +0800 Subject: [PATCH 2/5] Update 3.show-result-texts-on-the-video.html --- 4.use-case/3.show-result-texts-on-the-video.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 1ef795f4..97c1a002 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -121,10 +121,10 @@ } else { // if you set body `position` as `relative`, `absolute`, things can get complicated const bodyRect = document.body.getBoundingClientRect(); const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth); - const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth); + const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth); Object.assign(divInf.style, { left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, - top: `${convertedP1.y - bodyRect.top - bodyBorderBottom}px`, + top: `${convertedP1.y - bodyRect.top - bodyBorderTop}px`, }); } divInf.innerText = result.barcodeText; From d757c58be009e0ccd38c79682df21eb87411fcbe Mon Sep 17 00:00:00 2001 From: Keillion <735699921@qq.com> Date: Wed, 24 May 2023 18:25:18 +0800 Subject: [PATCH 3/5] scroll --- 4.use-case/3.show-result-texts-on-the-video.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 97c1a002..87f22c52 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -123,8 +123,8 @@ const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth); const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth); Object.assign(divInf.style, { - left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, - top: `${convertedP1.y - bodyRect.top - bodyBorderTop}px`, + left: `${(convertedP1.x + convertedP2.x) / 2 - (bodyRect.left + document.documentElement.scrollLeft) - bodyBorderLeft}px`, + top: `${convertedP1.y - (bodyRect.top + document.documentElement.scrollTop) - bodyBorderTop}px`, }); } divInf.innerText = result.barcodeText; From a907a8c4f139018781321411351fa0492f8035af Mon Sep 17 00:00:00 2001 From: Keillion <735699921@qq.com> Date: Wed, 24 May 2023 19:36:45 +0800 Subject: [PATCH 4/5] right -999 --- 4.use-case/3.show-result-texts-on-the-video.html | 1 + 1 file changed, 1 insertion(+) diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 87f22c52..5d6fc551 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -19,6 +19,7 @@ .bubble-box{ max-width: 20rem; /* You are likely to change it */ position: absolute; + right: -999px; background: white; border-radius: 4px; padding: 4px; From e9d34a730d822202b6defc314811166eb52b621e Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Fri, 26 May 2023 10:13:40 +0800 Subject: [PATCH 5/5] Update 3.show-result-texts-on-the-video.html --- .../3.show-result-texts-on-the-video.html | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html index 5d6fc551..30a8e62b 100644 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ b/4.use-case/3.show-result-texts-on-the-video.html @@ -104,28 +104,33 @@ y: Math.max(l.y1, l.y2, l.y3, l.y4), }; - /** - * 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document. - * Then we can place a div element according to the converted coordinate. - */ - const convertedP1 = scanner.convertToPageCoordinates(p1); - const convertedP2 = scanner.convertToPageCoordinates(p2); - divInf = document.createElement("div"); divInf.className = 'bubble-box'; const bodyStyle = getComputedStyle(document.body); if (bodyStyle.position === "static") { + /** + * 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document. + * Then we can place a div element according to the converted coordinate. + */ + const convertedP1 = scanner.convertToPageCoordinates(p1); + const convertedP2 = scanner.convertToPageCoordinates(p2); Object.assign(divInf.style, { left: `${(convertedP1.x + convertedP2.x) / 2}px`, top: `${convertedP1.y}px`, }); } else { // if you set body `position` as `relative`, `absolute`, things can get complicated + /** + * 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport. + * Then we can place a div element according to the converted coordinate. + */ + const convertedP1 = scanner.convertToClientCoordinates(p1); + const convertedP2 = scanner.convertToClientCoordinates(p2); const bodyRect = document.body.getBoundingClientRect(); const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth); const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth); Object.assign(divInf.style, { - left: `${(convertedP1.x + convertedP2.x) / 2 - (bodyRect.left + document.documentElement.scrollLeft) - bodyBorderLeft}px`, - top: `${convertedP1.y - (bodyRect.top + document.documentElement.scrollTop) - bodyBorderTop}px`, + left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, + top: `${convertedP1.y - bodyRect.top - bodyBorderTop}px`, }); } divInf.innerText = result.barcodeText;