jquery - jquery中crop \ zoom工具的几何计算

我正在用jQuery编写一个新的crop \ zoom工具，我已经用简单的几何图形打了一个墙。请看一下：

它的工作方式是：要裁剪\缩放的图像位于“拖动容器”（黄色背景）内，位于视口（黑色边框矩形）内。视口将具有“溢出：隐藏”，因此仅显示图像的一部分。

用户有两个控件 - 一个用于拖动图像以将其放置在视口内，另一个用于缩小原始图像。

它工作正常，但我在缩放时调整图像位置时遇到问题，因此缩放\缩小看起来是正确的。

我想要的是什么： 缩放时，图像应使用视口中心作为注册点来改变比例，而不是“滑动”到两侧。

更多信息：

这是因为浏览器完成的缩放使用图像的左上角作为注册点。黄色拖曳容器可以正确缩放，但是当它试图解决这个问题时，它的大小没有线性变化的事实确实让我很困惑。我被迫依靠一个非常丑陋的黑客来检查图像是否离开拖拉容器，如果是这样，则将其返回到正确的位置，而不是正确计算。

如果有人可以用他的两分钱筹码，我会喜欢它，并详细说明在缩放时计算拖动容器内图像的顶部\左侧位置的正确方法应该是什么“看起来正确”。