Pinch und Zoom kombiniert mit Ziehen mit Maus und Touchscreen ⇐ JavaScript

[Guest]

Ich versuche, auf einem Touchscreen-Monitor die Möglichkeit zu schaffen, in einen Teil eines Bildes hineinzuzoomen und es an der Stelle, an der das Ziehen endete, zu ziehen und herauszuzoomen.
Ich verwende die GSAP-Bibliothek zum Ziehen und Zoomen zusammen mit Hammer JS, um die Verwendung des Touchscreens zu erleichtern.
Von dem grundlegenden Codepen, den ich erstellt habe, habe ich es funktioniert. Wenn ich jedoch hineinzoome und dann zum anderen Ende des Bildes ziehe, wird das Bild beim Herauszoomen nicht von der Position meiner Maus aus skaliert. Ich denke, es hat etwas damit zu tun, dass transform-origin und translator3D() kollidieren, als ob es perfekt wäre, wenn ich an derselben Stelle hinein- und herauszoome.
Bin ich wirklich dumm und übersehe etwas unglaublich Offensichtliches, oder liegt es an etwas anderem?
Ich bin für jede Hilfe und/oder jeden Vorschlag dankbar.
https://codepen.io/wescritch98/pen/wBwmvmm

Code: Select all

[img]https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1736502806~exp=1736506406~hmac=55191bc567a6b56fa91081c238a86595d5a85ff785179070a8deb52b1ba05041&w=1380[/img]

Code: Select all

body {
display: flex;
justify-content: center;
align-ites: center;
overflow: hidden;
}

.box {
width: 300px;
height: 300px;
background: red;
}

Code: Select all

let image = document.querySelector(".zoom-item"),
hammer = new Hammer(image),
mousePosArr = [],
pinchPosArr = [];

hammer.get("pinch").set({
enable: true
});

hammer.on("pinchstart", (e) => {
let pinchX = e.srcEvent.offsetX,
pinchY = e.srcEvent.offsetY;

pinchPosArr.push(pinchX, pinchY);

zoomDrag[0].disable();
});

hammer.on("pinch", (e) => {
console.log(pinchPosArr);

let roundedX = Math.ceil(pinchPosArr[0]),
roundedY = Math.ceil(pinchPosArr[1]);

switch (e.additionalEvent) {
case "pinchout":
//round the numbers to nearest whole one
zoom_control("+=0.03", roundedX, roundedY);
break;
case "pinchin":
if (gsap.getProperty(e.target, "scale") >= 1.2) {
zoom_control("-=0.03", roundedX, roundedY);
}
break;
}
});

hammer.on("pinchend", () => {
pinchPosArr = [];
zoomDrag[0].enable();
});

let zoomObserver = Observer.create({
target: ".zoom-item",
type: "wheel", // Will only fire on the wheel scroll
ease: "linear", // makes the animations more slower
wheelSpeed: 0.1, // Changed how fast the zoom in happens
onUp: (self) => {
mousePosArr = [];
let mouseX = self.event.offsetX,
mouseY = self.event.offsetY;

mousePosArr.push(mouseX, mouseY);
// Creates an array and pushes each instance of mouseX and mouseY into the array

const [posA, posB] = mousePosArr.slice(-2); // slice() helps me grab the last two added items into the array

//using the posA and posB means that it zoom into wherever my mouse currently is
console.log(image.style.scale);
zoom_control("+=0.3", posA, posB);
},
onDown: (self) => {
// Will only fire if the scale is above the 1.2
if (gsap.getProperty(self.target, "scale") >= 1.2) {
zoom_control("-=0.3", mousePosArr[0], mousePosArr[1]);
}
}
}),
zoomDrag = Draggable.create(".zoom-item", {
zIndexBoost: false, // zIndexBoost set to false to stop it creasing on each click
onDrag: () => {
zoomObserver.disable();
},
onDragEnd: () => {
zoomObserver.enable();
}
});

function zoom_control(scaleNum, transformX, transformY) {
gsap.set(image, {
transformOrigin: `${transformX}px ${transformY}px`
});
let scaleSetter = gsap.quickSetter(image, "css");
scaleSetter({
scale: scaleNum
});
}