如何在使用我自己的鼠标滚轮smoothscroll时缩放鼠标指针？

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,其中包括mousewheel smoothscroll技术以及我到目前为止的缩放功能.

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

这本质上是我应用程序这一部分的完整功能演示.

如果滚动鼠标滚轮,您将看到jqueryui滑块进行插值并正确提供动量/减速度.但是变焦没有正确反应.

如果只滚动鼠标滚轮一个点,则缩放功能完美,但任何进一步的滚动都不起作用.我认为这是因为图像的比例现在已经改变,导致计算不正确.我试图弥补这一点,但到目前为止还没有任何运气.

总而言之,我想修改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函数中更改值,在循环中存储值和动画.