From b0903f93ffa5459b7645a0d424aee3d594b718ee Mon Sep 17 00:00:00 2001 From: Richard Bowman Date: Thu, 21 May 2020 14:08:23 +0100 Subject: [PATCH] Account for scale-to-fit in image stream Clicking the image was being scaled incorrectly, because the code assumed the image filled the element. However, with CSS scale-to-fit (content-fit: contain), that's not a good assumption. This commit adds logic to scale the click coordinates properly. --- src/components/viewComponents/streamDisplay.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue index f2eebe7f..240f1f33 100644 --- a/src/components/viewComponents/streamDisplay.vue +++ b/src/components/viewComponents/streamDisplay.vue @@ -132,14 +132,18 @@ export default { let xCoordinate = event.offsetX; let yCoordinate = event.offsetY; + // Simply scaling by naturalHeight/offsetHeight may give the wrong answer! + // because we use content-fit: contain in the stylesheet, the img element + // may be larger than the picture. So, we must determine whether the + // width or height is setting the scaling factor, and use a uniform scale + // factor. + let scale = Math.max(event.target.naturalWidth/event.target.offsetWidth, + event.target.naturalHeight/event.target.offsetHeight); + let xRelative = - ((0.5 * event.target.offsetWidth - xCoordinate) / - event.target.offsetWidth) * - event.target.naturalWidth; + (0.5 * event.target.offsetWidth - xCoordinate) * scale; let yRelative = - ((0.5 * event.target.offsetHeight - yCoordinate) / - event.target.offsetHeight) * - event.target.naturalHeight; + (0.5 * event.target.offsetHeight - yCoordinate) * scale; // Emit a signal to move, acted on by panelNavigate.vue this.$root.$emit(