放大时图像未正确拖动

Question

我在使用下面提供的功能时遇到问题。当放大图像时，可以将其拖动到其边界之外。此问题会导致图像与其容器之间存在间隙，并且该间隙随着图像比例的增大而增大。

看起来

getBoundingClientRect

方法可以准确地捕获图像缩放时的更新尺寸。尽管如此，问题的原因仍然存在。

对此问题的任何建议将不胜感激。

dragMove(event) {
    if (this.isDragging && this.imageScale > this.minZoom) {
        const containerRect = this.$refs.croquisContainer.getBoundingClientRect();
        const imageRect = this.$refs.croquisImage.getBoundingClientRect();
    
        const maxOffsetX = (imageRect.width - containerRect.width) / 2;
        const maxOffsetY = (imageRect.height - containerRect.height) / 2;
    
        const deltaX = event.clientX - this.lastX;
        const deltaY = event.clientY - this.lastY;
    
        const newOffsetX = this.offsetX + deltaX;
        const newOffsetY = this.offsetY + deltaY;
    
        this.offsetX = Math.max(Math.min(newOffsetX, maxOffsetX), -maxOffsetX);
        this.offsetY = Math.max(Math.min(newOffsetY, maxOffsetY), -maxOffsetY);
    
        this.lastX = event.clientX;
        this.lastY = event.clientY;
    }
}

JSFiddle：https://jsfiddle.net/n4d7txwy/

更新

这就解决了问题

const maxOffsetX = (imageRect.width - containerRect.width) / (2 * this.imageScale);
const maxOffsetY = (imageRect.height - containerRect.height) / (2 * this.imageScale);

Answer 1

看起来您需要在最大偏移计算中计算当前比例因子 -

const maxOffsetX = (imageRect.width - containerRect.width) / 2 / this.imageScale;
const maxOffsetY = (imageRect.height - containerRect.height) / 2 / this.imageScale;

它的行为似乎应该如此，请参阅https://jsfiddle.net/bzdwL914/