Le Zoom de l'image sur le curseur se brise lorsque la souris est déplacée

avant de vérifier ce violon dehors; je devrais mentionner:

tout D'abord , dans votre méthode .zoom() ; vous ne devez pas diviser par currentscale :

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

parce que; vous utilisez déjà ce facteur pour calculer le mouseLocation à l'intérieur de la méthode initmousewheel() comme ceci:

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

donc à la place; (dans le .zoom() méthode), vous devez:

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

mais (par exemple) a += b - a produira toujours b donc le code ci-dessus est égal à:

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

en bref:

self.currentLocation = self.mouseLocation;

alors, il semble que vous n'avez même pas besoin de self.currentLocation . (2 variables pour la même valeur). Alors pourquoi ne pas utiliser la variable mouseLocation dans la ligne où vous définissez la variable transform-origin à la place et vous débarrasser de la variable currentLocation ?

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

Deuxièmement , vous devez inclure un mousemove event listener dans la méthode initmousewheel() (comme d'autres devs ici suggèrent), mais il devrait mettre à jour la transformation en continu, pas seulement lorsque l'utilisateur roule. Sinon le bout du pointeur ne rattrapera jamais pendant que vous zoomez sur "n'importe quel" point aléatoire.

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

donc, vous n'auriez plus besoin de calculer ceci dans le mousewheel gestionnaire d'événement de la sorte, votre initmousewheel() méthode devrait ressembler à ceci:

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

Une Question:

Cette solution fonctionne comme prévu, mais avec un petit problème. Lorsque l'utilisateur déplace la souris en vitesse régulière ou rapide; l'événement mousemove semble manquer la position finale (testé dans Chrome). Donc le zoom sera un peu hors de l'emplacement du pointeur. Sinon, lorsque vous déplacez la souris lentement, il obtient l' point exact. Il devrait être facile de contourner ce bien.

Autres Notes et Suggestions:

• vous avez une propriété dupliquée ( prevscale ).
• je vous suggère d'utiliser toujours JSLint ou JSHint jsFiddle too) pour valider votre code.
• je vous suggère fortement d'utiliser des fermetures (souvent appelées expression de fonction immédiatement invoquée (IIFE)) pour éviter la portée globale lorsque cela est possible; et de cacher vos propriétés et méthodes internes/privées.