I’ve created a touch event to be able to zoom into an image, saved the x and y values in the touchstart
imageContainer.addEventListener("touchstart", function (event) {
event.preventDefault();
if (event.touches.length === 2) {
let touch1s = [event.touches[0].pageX, event.touches[0].pageY];
let touch2s = [event.touches[1].pageX, event.touches[1].pageY];
x = Math.abs(touch1s[0] + touch2s[0]) / 2;
y = Math.abs(touch1s[1] + touch2s[1]) / 2;
originalDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX,event.touches[0].pageY - event.touches[1].pageY );
zoomDrag[0].disable();
}
});
In the touchmove event listener I have added in functionality to be able to zoom in and out on the point of my finger,
imageContainer.addEventListener("touchmove", function (event) {
event.preventDefault();
if (event.touches.length === 2) {
let currentDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX,event.touches[0].pageY - event.touches[1].pageY);
if (originalDistance < currentDistance) {
if (gsap.getProperty(imageContainer, "scale") <= maxScale) {
zoom_control(imageContainer, x, y, "+=0.4");
}
} else if (originalDistance > currentDistance) {
if (gsap.getProperty(imageContainer, "scale") >= minScale) {
zoom_control(imageContainer, x, y, "-=0.4");
}
}
}
});
However when I implement the GSAP Draggable library and perform a drag when I am zoomed in, and try to zoom back in/out, the transform origin isn’t where it should be.
Math isn’t my strong suit so what would the formula be to make the transform origin correct?
