javascript - Hammer.js on pinchmove keep the centre of zoom in the centre of screen

Question

i am working an a superwide panorama image and really love your library. Everything is detected perfectly. But i have the following problem: My image is a table made of 82 tiles(images) exported with gimp. Now if i zoom, the more i zoom-in the more the centre of the image moves left so that when i am at max zoomfactor i am seeing e totally different image.

And one more thing is a bit irritating: when i zoom-in it is very fidgety.

var imageElement = document.getElementById('zoomme');

const minScale = 1;
const maxScale = 4;

const imageElementWidth = imageElement.offsetWidth;
const imageElementHeight = imageElement.offsetHeight;

let imageElementScale = 1;

let rangeMaxX = 0;
let rangeMinX = 0;

let rangeMaxY = 0;
let rangeMinY = 0;

const updateRange = () => {
  const rangeX = Math.max(0, Math.round(imageElementWidth * imageElementScale) - imageElementWidth);
  const rangeY = Math.max(0, Math.round(imageElementHeight * imageElementScale) - imageElementHeight);

  rangeMaxX = Math.round(rangeX / 2);
  rangeMinX = Math.round(0 - rangeMaxX);

  rangeMaxY = Math.round(rangeY / 2);
  rangeMinY = Math.round(0 - rangeMaxY);
};

const updateImage = (deltaX, deltaY) => {
  const imageElementCurrentX = Math.min(Math.max(rangeMinX, deltaX), rangeMaxX) * 2;
  const imageElementCurrentY = Math.min(Math.max(rangeMinY, deltaY), rangeMaxY) * 2;

  const transform = `translate3d(${imageElementCurrentX}px, ${imageElementCurrentY}px, 0) scale(${imageElementScale})`;
  imageElement.style.transform = transform;
  imageElement.style.WebkitTransform = transform;
  imageElement.style.zIndex = "9999";
};

const resetImage = () => {
  imageElement.style.transform = "";
  imageElement.style.WebkitTransform = "";
  imageElement.style.zIndex = "";
};

const hammertime = new Hammer.Manager(imageElement, {
  touchAction: "auto",
  recognizers: [
    [Hammer.Pinch, { enable: true }]
  ]
});

hammertime.get('pinch').set({ threshold: 0.05 });

hammertime.on('pinchstart', event => {
  console.log('pinchstart', event);
});

hammertime.on('pinchmove', event => {
  console.log('pinchmove', event);
  imageElementScale = Math.min(Math.max(minScale, event.scale), maxScale);
  updateRange();
  updateImage(event.deltaX, event.deltaY);
});

hammertime.on('pinchend', event => {
  console.log('pinchend', event);
  resetImage();
});

标签： javascripthammer.jspinchzoom