javascript - 移动鼠标时将图像缩放至光标中断位置

Question

这是 How to zoom to mouse pointer while using my own mousewheel smoothscroll? 的后续问题

我正在使用 css 变换将图像缩放到鼠标指针。我还使用自己的平滑滚动算法来插值并为鼠标滚轮提供动量。

在 Bali Balo 的帮助下，我已经完成了上一个问题的 90%。

您现在可以将图像一直放大到鼠标指针，同时仍然可以平滑滚动，如下面的 JSFiddle 所示:

http://jsfiddle.net/qGGwx/7/

但是，当鼠标指针移动时，该功能就会被破坏。

为了进一步澄清，如果我在鼠标滚轮上放大一格，图像将围绕正确的位置缩放。对于我在鼠标滚轮上放大的每个凹口，这种行为都会持续下去，完全按照预期进行。但是，如果在放大部分后，我将鼠标移动到其他位置，则功能会中断，并且我必须完全缩小才能更改缩放位置。

预期的行为是在缩放过程中鼠标位置的任何变化都能正确反射(reflect)在缩放图像中。

控制当前行为的两个主要函数如下:

self.container.on('mousewheel', function (e, delta) {
        var offset = self.image.offset();

        self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
        self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;

        if (!self.running) {
            self.running = true;
            self.animateLoop();
        }
        self.delta = delta
        self.smoothWheel(delta);
        return false;
    });

此函数收集缩放图像的当前比例下鼠标的当前位置。

然后它启动我的平滑滚动算法，这会导致每次插值调用下一个函数:

zoom: function (scale) {

    var self = this;
    self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
    self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);

    var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
    var newCss = {};
    for (var i = compat.length - 1; i; i--) {
        newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
        newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
    }
    self.image.css(newCss);


    self.currentscale = scale;
},

此函数采用缩放量 (1-10) 并应用 css 变换，使用变换原点重新定位图像。

虽然这对于图像完全缩小时选择的固定鼠标位置非常有效；如上所述，当鼠标光标在部分缩放后移动时，它会中断。

非常感谢任何可以提供帮助的人。

Answer 1

其实，并不太复杂。您只需要将鼠标位置更新逻辑与缩放更新逻辑分开即可。看看我的 fiddle : http://jsfiddle.net/qGGwx/41/

我在这里所做的就是在容器上添加一个“mousemove”监听器，并将 self.mouseLocation 更新逻辑放在那里。由于不再需要它，我还从“mousewheel”处理程序中取出了 mouseLocation 更新逻辑。动画代码保持不变，何时启动/停止动画循环的决定也保持不变。

代码如下:

    self.container.on('mousewheel', function (e, delta) {
        if (!self.running) {
            self.running = true;
            self.animateLoop();
        }
        self.delta = delta
        self.smoothWheel(delta);
        return false;
    });

    self.container.on('mousemove', function (e) {
        var offset = self.image.offset();

        self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
        self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
    });