pinchmove 上的 Hammer.js 将缩放中心保持在屏幕中心

如何解决pinchmove 上的 Hammer.js 将缩放中心保持在屏幕中心

我正在制作超宽全景图像，非常喜欢您的图书馆。一切都被完美地检测到。 但我有以下问题：我的图像是一个由 82 个用 gimp 导出的图块（图像）组成的表格。 现在，如果我放大，我放大得越多，图像的中心向左移动得越多，因此当我处于最大缩放系数时，我会看到完全不同的图像。

还有一件事有点烦人：当我放大时非常烦躁。

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();
});