I want to store the x, y coordinates of a click on the image. I want to implement this in my angular4 app.
The issue is when I resize the screen on the responsive site, the displayed clicks are now all off. I'm coming up empty on my searches but is there a formula or algorithm to recalculate the x and y coordinates for different resolutions.
For example, the first click, if the width goes from 1257 to 990 and the height goes from 959 to 400, how to I recalculate the x and y so they line up in the same spot?
instead of storing the absolute values, you should store relative values. That means, that instead of storing the pixel-value, you store the percentage of how right a dot is (instead of
1257, you store0.97253). On resizing, you can calculate the absolute values from the relative ones. You can use and expand the example functions below./// returns current viewport dimensions as [x,y] const getViewportDim = function getViewportDim() { return [ Math.max(document.documentElement.clientWidth, window.innerWidth || 0), Math.max(document.documentElement.clientHeight, window.innerHeight || 0), ]; }; /// returns relative [x,y] coords, depending on the viewport dimensions const getRelCoords = function getRelCoords(absX, absY) { const viewportDim = getViewportDim(); return [ absX / viewportDim[0], absY / viewportDim[1], ]; }; /// returns absolute [x,y] coords, depending on the viewport dimensions const getAbsCoords = function getAbsCoords(relX, relY) { const viewportDim = getViewportDim(); return [ relX * viewportDim[0], relY * viewportDim[1], ]; };