Ограничение границ изображения при панорамировании/масштабировании с использованием JavaScript ⇐ Javascript

[Гость]

Я хочу ограничить границы моего изображения при панорамировании, поэтому левый край изображения не должен выходить за левый край контейнера при панорамировании слева направо, а правый край изображения не должен выходить за пределы левого края контейнера. справа от контейнера при панорамировании справа налево. В меньшем масштабе граничное условие в коде работает, а в большем граничное условие не работает, и я не могу понять, в чем проблема.
// ------------------- Масштабирование и панорамирование изображения ------------------ ------------ масштаб вар = 1, панорамирование = ложь, точкаХ = 0, точкаY = 0, мид_х = 0, мид_у = 0, начало = {х: 0, у: 0}, Zoommap = document.getElementById("представить"); пусть newPointX, newPointY; // Мышь вниз || сенсорный старт ((zoommap, event_names, Zoom_start) => { event_names.forEach((event_name) => { Zoommap.addEventListener(имя_события, Zoom_start) }) })(zoommap, ['mousedown', 'touchstart'], (e) => { е.preventDefault(); панорамирование = правда; if (e.type == 'mousedown'){ start = { x: e.clientX - pointX, y: e.clientY - pointY }; } иначе, если (e.type == 'touchstart'){ если (e.touches.length === 1){ start = { x: e.touches[0].clientX - pointX, y: e.touches[0].clientY - pointY}; } иначе если (e.touches.length === 2){ start = { x: (e.touches[0].clientX + e.touches[1].clientX) / 2 - точкаX, y: (e.touches[0].clientY + e.touches[1].clientY) / 2 - точкаY, dist: Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY) }; } } }); // Мышь вверх || касание ((zoommap, event_names, Zoom_end) => { event_names.forEach((event_name) => { Zoommap.addEventListener(имя_события, Zoom_end) }) })(zoommap, ['mouseup', 'touchend', 'touchcancel'], (e) => { панорамирование = ложь; }); // Перемещение мыши || сенсорное перемещение || Панорамирование изображения ((zoommap, event_names, Zoom_end) => { event_names.forEach((event_name) => { Zoommap.addEventListener(имя_события, Zoom_end) }) })(zoommap, ['mousemove', 'touchmove'], (e) => { е.preventDefault(); if (!panning || масштаб === 1) { возвращаться; } if (e.type == 'mousemove'){ newPointY = (e.clientY - start.y); newPointX = (e.clientX - start.x); } else if (e.type == 'touchmove'){ если (e.touches.length === 1){ newPointX = (e.touches[0].clientX - start.x); newPointY = (e.touches[0].clientY - start.y); } } var mapimg_div = document.getElementById("mapimg"); const map_dim = mapimg_div.getBoundingClientRect(); const img_dim = Zoommap.getBoundingClientRect(); console.log(масштаб) // Рассчитываем максимально разрешенные позиции const maxX = map_dim.left + (img_dim.width * масштаб - map_dim.width)/масштаб - map_dim.right; const maxY = map_dim.top + (img_dim.height * масштаб - map_dim.bottom)/масштаб - map_dim.height; const minX = map_dim.right - img_dim.width*scale - map_dim.left + map_dim.width; // Скорректировано, чтобы разрешить пересечение const minY = map_dim.bottom - img_dim.height*scale - map_dim.top + map_dim.height; // Скорректировано, чтобы разрешить пересечение // Зажимаем новые позиции, чтобы оставаться в пределах границ если (newPointX > maxX) { newPointX = МаксX; } иначе если (newPointX < minX) { newPointX = минX; } если (newPointY > maxY) { новаяPointY = МаксY; } иначе если (newPointY < minY) { новаяPointY = минY; } // Обновляем pointX и pointY новыми значениями точкаX = новаяPointX; точкаY = новаяТочкаY; Zoommap.style.transform = "translate(" + pointX + "px, " + pointY + "px) масштаб(" + масштаб + ")"; }); //Функция масштабирования ((zoommap, event_names, Zoom_move) => { event_names.forEach((event_name) => { Zoommap.addEventListener(имя_события, Zoom_move) }) })(zoommap, ['mousewheel', 'touchmove'], (e) => { е.preventDefault(); Zoommap.style.transform = "нет"; вар img_dim = Zoommap.getBoundingClientRect(); if (e.type == 'колесо мыши'){ var x = ((img_dim.width - (img_dim.right- e.clientX))/img_dim.width) * 100; // позиция x внутри элемента img var y = ((img_dim.height - (img_dim.bottom- e.clientY))/img_dim.height) * 100; //y позиция внутри элемента img Zoommap.style.transformOrigin = x + «%» + y + «%»; var delta = (e.wheelDelta ? e.wheelDelta: -e.deltaY); (дельта > 0) ? (масштаб *= 1,2): (масштаб /= 1,2); } else if (e.type == 'touchmove'){ если (e.touches.length == 2){ если (e.scale) { масштаб = e.scale; } еще { var move_dist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); (move_dist > start.dist)? (масштаб *= 1,01): (масштаб /= 1,01); } // Вычисляем, насколько сместились пальцы по осям X и Y var x = ((img_dim.width - (img_dim.right-mid_x))/img_dim.width) * 100; var y = ((img_dim.height - (img_dim.bottom-mid_y))/img_dim.height) * 100; Zoommap.style.transformOrigin = x + «%» + y + «%»; Mid_x = ( + e.touches[1].clientX) / 2 Mid_y = (e.touches[0].clientY + e.touches[1].clientY) / 2 pointX = (mid_x - start.x); pointY = (mid_y - start.y); } } масштаб = Math.min(Math.max(1, масштаб), 20); точкаХ = 0; точкаY = 0; Zoommap.style.transform = "масштаб(" + масштаб + ") перевод(" + pointX + "px, " + pointY + "px)"; });