Увеличение изображения до разрыва курсора при перемещении мыши

Прежде чем проверить эту скрипку; Я должен упомянуть:

Прежде всего в рамках вашего .zoom() метода; не делите на currentscale:

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

так как; вы уже используете этот коэффициент при вычислении mouseLocation внутри метода initmousewheel() следующим образом:

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

Так что вместо этого; (в методе .zoom()) следует:

self.currentLocation.x += (self.mouseLocation.x - self.currentLocation.x);
self.currentLocation.y += (self.mouseLocation.y - self.currentLocation.y);

Но (например) a += b - a всегда будет давать b, поэтому приведенный выше код равен:

self.currentLocation.x = self.mouseLocation.x;
self.currentLocation.y = self.mouseLocation.y;

короче:

self.currentLocation = self.mouseLocation;

Тогда, кажется, тебе даже не нужно self.currentLocation. (2 переменные для одного значения). Так почему бы не использовать переменную mouseLocation в строке, где вы устанавливаете transform-origin, и избавиться от переменной currentLocation?

newCss[compat[i] + 'transform-origin'] = self.mouseLocation.x + 'px ' + self.mouseLocation.y + 'px';

Во-вторых, вы должны включить прослушиватель событий mousemove в метод initmousewheel() (как и предлагают здесь другие разработчики), но он должен обновлять преобразование постоянно, а не только тогда, когда пользователь движется. В противном случае кончик указателя никогда не догонит, пока вы уменьшаете масштаб "любой" случайной точки.

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;
    self.zoom(self.currentscale);
});

Так; вам больше не нужно вычислять это в обработчике событий mousewheel, поэтому ваш метод initmousewheel() будет выглядеть так:

initmousewheel: function () {
    var self = this;

    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;
        self.zoom(self.currentscale); // <--- update transform origin dynamically
    });
}

Одна проблема:

Это решение работает должным образом, но с небольшой проблемой. Когда пользователь перемещает мышь с обычной или высокой скоростью; событие mousemove, похоже, не принимает окончательную позицию (проверено в Chrome). Таким образом, масштабирование будет немного отличаться от положения указателя. В противном случае, когда вы медленно перемещаете мышь, она получает точную точку. Однако это должно быть легко обойти.

Другие примечания и предложения:

• У вас есть повторяющийся объект недвижимости (prevscale).
• Я предлагаю вам всегда использовать JSLint или JSHint (который также доступен на jsFiddle) для проверки вашего кода.
• Я настоятельно рекомендую вам использовать замыкания (часто называемые выражением немедленно вызываемой функции (IIFE)), чтобы по возможности избежать глобальной области видимости; и скрыть свои внутренние / частные свойства и методы.

На самом деле, не так уж и сложно. Вам просто нужно отделить логику обновления местоположения мыши от логики обновления масштабирования. Посмотрите мою скрипку: http://jsfiddle.net/qGGwx/41/

Все, что я здесь сделал, это добавил слушателя mousemove в контейнер и поместил туда логику обновления self.mouseLocation. Поскольку это больше не требуется, я также вынул логику обновления mouseLocation из обработчика mousewheel. Код анимации остается прежним, как и решение о том, когда запускать / останавливать цикл анимации.

вот код:

    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;
    });

Добавьте метод mousemover и вызовите его в методе init:

mousemover: function() {
    var self = this;
    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;

        self.zoom(self.currentscale);
    });
},

Скрипка: http://jsfiddle.net/powtac/qGGwx/34/

Точка увеличения не совсем правильная из-за масштабирования изображения (0.9 в ratio). Фактически мышь указывает на конкретную точку в container, но мы масштабируем image. См. Эту скрипку. http://jsfiddle.net/qGGwx/99/ Я добавляю marker с позицией, равной transform-origin. Как видите, если размер изображения равен размеру контейнера, проблем нет. Вам нужно это масштабирование? Может, можно добавить второй контейнер? В скрипке я также добавил условие в mousemove

if(self.running && self.currentscale>1 && self.currentscale != self.lastscale) return;

Это предотвращает перемещение изображения во время масштабирования, но также создает проблему. Вы не можете изменить точку масштабирования, если zoom все еще работает.

Расширяя ответ @jordancpaul, я добавил константу mouse_coord_weight, которая умножается на дельту координат мыши. Это нацелено на то, чтобы сделать переход масштабирования менее чувствительным к изменению координат мыши. Проверьте это http://jsfiddle.net/7dWrw/

Я переписал обработчик событий onmousemove как:

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

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

        if(self.running) {
            self.mouseLocation.x += (x - self.mouseLocation.x) * self.mouse_coord_weight;
            self.mouseLocation.y += (y - self.mouseLocation.y) * self.mouse_coord_weight;
        } else {
            self.mouseLocation.x = x;
            self.mouseLocation.y = y;
        }

    });