javascript - 如何在使用我自己的鼠标滚轮平滑滚动时缩放到鼠标指针？

Question

我的应用程序的一部分包含类似于谷歌地图的功能，用户应该能够在容器内放大和缩小图像。

与谷歌地图一样，我希望用户能够使用鼠标滚轮滚动，图像上的像素始终保持在鼠标指针的正下方。所以基本上用户将缩放到他们的鼠标指针所在的位置。

对于缩放/平移，我正在使用这样的 css 转换:

可见

   $('#image').css({
            '-moz-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-moz-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-webkit-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-webkit-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-o-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-o-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-ms-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-ms-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              'transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            'transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px'
            });

我已经设法找到了如何实现这一点的各种实现，但是我正在使用自滚动平滑滚动技术来插入鼠标事件并提供动力。

事实证明，试图让两者一起正常工作很麻烦。

我没有在此处粘贴全部代码，而是创建了一个 jsFiddle，其中包括鼠标滚轮平滑滚动技术以及我目前拥有的缩放功能。

http://jsfiddle.net/gordyr/qGGwx/2/

这实质上是我的应用程序这部分的完整功能演示。

如果滚动鼠标滚轮，您将看到 jqueryui slider 插值并正确提供动量/减速。然而，变焦没有正确 react 。

如果您只滚动鼠标滚轮一个点，缩放效果很好，但任何进一步的滚动都不起作用。我假设这是因为图像的比例现在已经改变导致计算不正确。我曾尝试对此进行补偿，但到目前为止还没有成功。

总而言之，我想修改我的 jsFiddle 中的代码，以便图像始终直接缩放到鼠标指针。

非常感谢任何愿意提供帮助的人。

Answer 1

您可以使用 css3 转换更轻松地做到这一点。
示例:http://jsfiddle.net/BaliBalo/xn75a/
主要的中心鼠标算法在这里:

//Center the image if it's smaller than the container
if(scale <= 1)
{
    currentLocation.x = im.width() / 2;
    currentLocation.y = im.height() / 2;
}
else
{
    currentLocation.x += moveSmooth * (mouseLocation.x - currentLocation.x) / currentScale;
    currentLocation.y += moveSmooth * (mouseLocation.y - currentLocation.y) / currentScale;
}

如果你想保留你已经存在的代码，我认为你可以做大致相同的事情:当图像本身通过 css 缩放变换缩放并使用 transform- 时获取缩放图像上的鼠标位置的技巧origin 是将变换原点减去您的点，然后乘以该因子，最后重新添加变换原点。

您也可以像这个更新的示例一样使用翻译:http://jsfiddle.net/BaliBalo/xn75a/15/如您所见，它甚至简化了公式，但不要忘记将元素的中心移至鼠标点，因为 {0, 0} 的平移将放大图像的中间。

---

编辑:

我今天偶然发现了我的这个答案，并认为这并不是您真正想要的行为。第一次我没有正确理解您不想将点置于鼠标下方的中心，而是将其保持在同一位置。正如我最近为个人项目所做的那样，我试图纠正自己。所以这里有一个更准确的答案:
http://jsfiddle.net/BaliBalo/7ozrc1cq/

现在的主要部分是(如果 currentLocation 是容器中图像的左上角):

var factor = 1 - newScale / currentScale;
currentLocation.x += (mouseLocation.x - currentLocation.x) * factor;
currentLocation.y += (mouseLocation.y - currentLocation.y) * factor;

我还删除了 CSS 过渡。我认为实现平滑滚动的最佳方法是使用 requestAnimationFrame 来创建动画循环，而不是直接在 zoom 函数中更改值，存储值和动画他们在循环中。