Javascript 鼠标结束时，向目标缩放

我在网上找到了这个脚本，我认为它可以帮助我放大图像，但可以放大鼠标位置。但是，当鼠标位于左侧时，情况并非如此。我觉得有一个简单的改变，我需要做，但我找不到它

window.addEventListener（'load'，（）=>{
新的Vue（{}）。$mount（'#app'）；
});
Vue.组件（“测试”{
模板：“#模板”，
数据（）{
返回{
zoomMin:1，
zoomMax:7，
dragEventX:null，
dragEventY:null，
touchEvent:null，
zoomPointX:0，
动物园名称：0，
动物园规模：1，
zoomStyle:null，
帧：1，
速度：1，
缩放：1，
}
},
安装的（）{
this.$refs.image.addEventListener（'wheel'，this.onWheel）；
},
方法：{
onWheel（$事件）{
$event.preventDefault（）；
让方向=数学符号（$event.deltaY）；
设n=this.zoomScale-方向/（6/this.speed）；
this.setZoomScale（$event.clientX，$event.clientY，n）
},
setZoomScale（客户端X，客户端Y，n）{
const bounding=this.$refs.image.getBoundingClientRect（）；
让mouseLeft=clientX-bounding.left，
mouseTop=clientY-bounding.top，
zoomPointX=this.zoomPointX | | 0，
zoomPointY=this.zoomPointY | | 0；
让leftPoint=（mouseLeft-zoomPointX）/this.zoomcale，
topPoint=（mouseTop-zoomPointY）/this.zoomScale；
this.zoomcale=Math.min（Math.max（n，this.zoomMin），this.zoomMax）；
让leftZoom=-leftPoint*this.zoomScale+mouseLeft，
topZoom=-topPoint*this.zoomScale+mouseTop；
this.setZoomPoint（leftZoom、topZoom）；
},
setZoomPoint（左缩放、上缩放）{
设left=leftZoom | | this.zoomPointX | | 0，
top=topZoom | | this.zoomPointY | | 0，
leftOffset=this.$el.clientWidth*（this.zoomScale-1），
topOffset=this.$el.clientHeight*（this.zoomScale-1）；
this.zoomPointX=Math.min（Math.max（left，-leftOffset），0）；
this.zoomponty=Math.min（Math.max（top，-topOffset），0）；
this.setZoomStyle（）；
},
setZoomStyle（）{
this.zoomStyle={
transform:`translate（${this.zoomPointX}px，${this.zoomPointY}px）scale（${this.zoomSale}）`
};
},
}
});
#应用程序{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.集装箱{
宽度：80%；
身高：80%；
溢出：隐藏；
边框：1px实心#000；
}
.集装箱img{
宽度：100%；
}
您也不会向右侧的鼠标缩放；事实上，如果你把鼠标放在左上角，你就会放大到图像的中心。除此之外，我至少可以识别
this.zoomPointX=Math.min（Math.max（left，-leftOffset），0）只允许平移向左，因此只允许向中心线的右侧缩放

一些调试
让我们先退一步，弄清楚我们在这里做什么。最终的样式是平移，然后是比例。这个比例发生在你屏幕上看到的中心位置上，而在这之前发生的转换是为了移动图像，所以你想要放大的点在中间。

为了正确地调试它，我们需要更好地理解代码在做什么，所以我首先添加了一些调试标记并禁用了缩放样式，这样我们就可以可视化正在发生的事情，而不必到处缩放


window.addEventListener（'load'，（）=>{
新的Vue（{}）。$mount（'#app'）；
});
Vue.组件（“测试”{
模板：“#模板”，
数据（）{
返回{
zoomMin:1，
zoomMax:7，
dragEventX:null，
dragEventY:null，
touchEvent:null，
zoomPointX:0，
动物园名称：0，
动物园规模：1，
zoomStyle:null，
帧：1，
速度：1，
缩放：1，
//调试
图像高度：0，
图像宽度：0，
}
},
计算：{
markerStyle（）{
返回{
顶部：`${this.imageHeight/2-this.zoomPointY}px`，
左：`${this.imageWidth/2-this.zoomPointX}px`，
};
},
边界标记样式（）{
const middleY=this.imageHeight/2-this.zoomponty；
const middleX=this.imageWidth/2-this.zoomPointX；
常量高度=this.imageHeight/this.zoomScale；
const width=this.imageWidth/this.zoomScale；
返回{
顶部：${middleY-height/2}px`，
左：`${middleX-width/2}px`，
宽度：`${width}px`，
高度：`${height}px`，
};
},
},
安装的（）{
//将侦听器移动到容器，以便我们可以在图像上覆盖某些内容
this.$refs.container.addEventListener（“wheel”，this.onWheel）；
//临时用于调试；我还可以动态地确定它，如果我们
//我们希望能够调整大小
这是.$refs.image.addEventListener（“加载”，（）=>{
const bounding=this.$refs.image.getBoundingClientRect（）；
this.imageHeight=bounding.height；
this.imageWidth=bounding.width；
});
},
方法：{
onWheel（$事件）{
$event.preventDefault（）；
让方向=数学符号（$event.deltaY）；
设n=this.zoomScale-方向/（6/this.speed）；
this.setZoomScale（$event.clientX，$event.clientY，n）
},
setZoomScale（客户端X，客户端Y，n）{
const bounding=this.$refs.image.getBoundingClientRect（）；
//mouseLeft和mouseTop表示我们目标容器中的像素
const mouseLeft=clientX-bounding.left；
const mouseTop=clientY-bounding.top；
//zoomPointX和Y表示我们正在向哪个点缩放
常量zoomPointX=this.zoomPointX | | 0；
const zoomPointY=this.zoomPointY | | 0；
//这将尝试修改我们基于的目标点
//我们以前的目标和现在的目标
//zoomPointX表示