Блог

я работаю над сверхшироким панорамным изображением и очень люблю вашу библиотеку. Все обнаруживается идеально. Но у меня есть следующая проблема: мое изображение представляет собой таблицу, состоящую из 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();
});