I have an image, at a fixed dimensions, where when clicked we get the location. That location is used as a dot as in image:
When the image is clicked, we get the location and move the marker as the user clicks the image:
// onClick function:
setPoint = (e) => {
// If things look weird, I'm using Stimulusjs
// but should be straight forward to show as an
// example.
// These "var"s you see was a quick copy/paste from a legacy
// code base.
var X_OFF_SET = 1;
var Y_OFF_SET = 1;
var X_IMAGE_OFFSET = 8;
var Y_IMAGE_OFFSET = 8;
let device = document.head.dataset.device // desktop or mobile
console.log(device === 'desktop')
// Things work weird on iOS webview so I use e.pageX/Y
let x = device === 'desktop' ? e.clientX : e.pageX; // or pageX
let y = device === 'desktop' ? e.clientY : e.pageY;
// this.planViewTarget is the image DOM element
var intXPos = x - this.findPosX(this.planViewTarget) - X_IMAGE_OFFSET;
var intYPos = y - this.findPosY(this.planViewTarget) - Y_IMAGE_OFFSET;
console.log( (intXPos + X_OFF_SET), intYPos + Y_OFF_SET);
//this.xCoordinateTarget.value = intXPos + X_OFF_SET
//this.yCoordinateTarget.value = intYPos + Y_OFF_SET
// this.defaultPointTarget is the DOM element (the marker on the image)
this.defaultPointTarget.style.left = (intXPos + X_OFF_SET) + "px";
this.defaultPointTarget.style.top = (intYPos + Y_OFF_SET) + "px";
// Legacy code that seems to work well:
findPosX(obj) {
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
findPosY(obj) {
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
}
With the above code is what I’ve inherited which does the work.
What I’m now tasked with is, if the image is resized, the points should be at the same location on the image but instead, the points (markers) are fixed on the screen.
Is it possible to change the code so that the markers move when the image is resized? If not possible, I could explain why it’s not possible?
Thanks