图片放大后拖拽越界问题求助及修复方案

使用dragMove函数时遇到以下问题：图片放大后可被拖拽出容器边界，导致图片与容器间出现间隙，且间隙随缩放比例增大而扩大。已确认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;
    }
}

问题解决 #

修改maxOffsetX和maxOffsetY的计算方式即可解决该问题：

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

原因说明：offsetX/offsetY是基于图片原始尺寸的偏移量，而imageRect.width是缩放后的实际显示尺寸。直接用缩放后的尺寸差值计算偏移上限，会导致限制值被放大了imageScale倍，因此需要除以2 * this.imageScale，将缩放后的差值转换回与偏移量基准一致的原始尺寸比例，从而准确限制拖拽范围。

内容的提问来源于stack exchange，提问作者Antonio