这是 post 的延续
当我单击并放大图像时,它会将居中的图像推向右侧,如何强制它缩放而不向右移动
const element = document.querySelector('.image-inner-wrapper');
const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');
let panZoomController = panzoom(element, {
autoCenter: true,
beforeWheel: function(e) {
// allow wheel-zoom Disabled
return true;
}
});
const setText = (input) => {
text.innerText = input;
};
const zoom = () => {
const isSmooth = false;
const scale = currentZoomLevel;
if (scale) {
const transform = panZoomController.getTransform();
const deltaX = transform.x;
const deltaY = transform.y;
const offsetX = scale + deltaX;
const offsetY = scale + deltaY;
if (isSmooth) {
panZoomController.smoothZoom(0, 0, scale);
} else {
panZoomController.zoomAbs(offsetX, offsetY, scale);
}
}
};
const zoomIn = () => {
const idx = zoomLevels.indexOf(currentZoomLevel);
// If next element exists
if (typeof zoomLevels[idx + 1] !== 'undefined') {
currentZoomLevel = zoomLevels[idx + 1];
}
if (currentZoomLevel === 1) {
panZoomController.moveTo(0, 0);
panZoomController.zoomAbs(0, 0, 1);
} else {
zoom();
}
setText(currentZoomLevel * 100 + '%');
};
const zoomOut = () => {
const idx = zoomLevels.indexOf(currentZoomLevel);
//if previous element exists
if (typeof zoomLevels[idx - 1] !== 'undefined') {
currentZoomLevel = zoomLevels[idx - 1];
}
if (currentZoomLevel === 1) {
panZoomController.moveTo(0, 0);
panZoomController.zoomAbs(0, 0, 1);
} else {
zoom();
}
setText(currentZoomLevel * 100 + '%');
};
.overflow-hidden {
overflow: hidden !important;
border: 3px solid red;
}
img {
display: table;
margin: 0 auto;
}
<div class="overflow-hidden">
<div class="image-inner-wrapper">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d4c5cadecbcbc9e49c8a958a94" rel="noreferrer noopener nofollow">[email protected]</a>/dist/panzoom.min.js"></script>
最佳答案
我相信这里的技巧是获取元素的新宽度,将其除以二,并将其设置为 offsetX 坐标
在zoom()函数下...
const offsetX = element.offsetWidth / 2;
const element = document.querySelector('.image-inner-wrapper');
const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');
let panZoomController = panzoom(element, {
beforeWheel: function(e) {
// allow wheel-zoom Disabled
return true;
}
});
const setText = (input) => {
text.innerText = input;
};
const zoom = () => {
console.log(element.offsetWidth);
const isSmooth = false;
const scale = currentZoomLevel;
if (scale) {
const transform = panZoomController.getTransform();
const deltaX = transform.x;
const deltaY = transform.y;
const offsetX = element.offsetWidth / 2;
const offsetY = scale + deltaY;
if (isSmooth) {
panZoomController.smoothZoom(0, 0, scale);
} else {
panZoomController.zoomAbs(offsetX, offsetY, scale);
}
}
};
const zoomIn = () => {
const idx = zoomLevels.indexOf(currentZoomLevel);
// If next element exists
if (typeof zoomLevels[idx + 1] !== 'undefined') {
currentZoomLevel = zoomLevels[idx + 1];
}
if (currentZoomLevel === 1) {
panZoomController.moveTo(0, 0);
panZoomController.zoomAbs(0, 0, 1);
} else {
zoom();
}
setText(currentZoomLevel * 100 + '%');
};
const zoomOut = () => {
const idx = zoomLevels.indexOf(currentZoomLevel);
//if previous element exists
if (typeof zoomLevels[idx - 1] !== 'undefined') {
currentZoomLevel = zoomLevels[idx - 1];
}
if (currentZoomLevel === 1) {
panZoomController.moveTo(0, 0);
panZoomController.zoomAbs(0, 0, 1);
} else {
zoom();
}
setText(currentZoomLevel * 100 + '%');
};
.overflow-hidden {
overflow: hidden !important;
border: 3px solid red;
}
img {
display: table;
margin: 0 auto;
}
<div class="overflow-hidden">
<div class="image-inner-wrapper">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabaaba4b0a5a5a78af2e4fbe4fa" rel="noreferrer noopener nofollow">[email protected]</a>/dist/panzoom.min.js"></script>
关于javascript - 使用键盘放大会将居中图像向右移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57417199/