Ein Teil meiner App enthält Funktionen, die Google Maps ähneln, da der Benutzer in der Lage sein sollte, ein Bild in einem Container zu vergrößern und zu verkleinern.

Genauso wie bei Google Maps möchte ich, dass der Benutzer mit dem Mausrad scrollen kann und der Pixel im Bild immer direkt unter dem Mauszeiger bleibt. Im Wesentlichen zoomt der Benutzer also dorthin, wo sich sein Mauszeiger befindet.

Für das Zoomen / Übersetzen verwende ich CSS-Transformationen wie folgt:

sichtbar

   $('#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'
            });

Es ist mir gelungen, verschiedene Implementierungen zu finden, um dies zu erreichen. Ich verwende jedoch eine selbstgerollte Smooth-Scroll-Technik, um die Mausereignisse zu interpolieren und Schwung zu verleihen.

Der Versuch, die beiden zum richtigen Zusammenspiel zu bringen, erweist sich als mühsam.

Anstatt hier eine ganze Menge Code einzufügen, habe ich eine jsFiddle erstellt, die die Mausrad-Smoothscroll-Technik zusammen mit der Zoom-Funktion enthält, die ich bisher habe.

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

Dies ist im Wesentlichen eine voll funktionsfähige Demo dieses Teils meiner App.

Wenn Sie mit dem Mausrad scrollen, werden Sie feststellen, dass der jqueryui-Schieberegler interpoliert und den Impuls / die Verzögerung korrekt angibt. Der Zoom reagiert jedoch nicht richtig.

Wenn Sie mit dem Mausrad nur um einen Punkt scrollen, funktioniert der Zoom einwandfrei, weitere Scrollen funktionieren jedoch nicht. Ich gehe davon aus, dass sich der Maßstab des Bildes geändert hat und die Berechnungen falsch sind. Ich habe versucht, dies zu kompensieren, aber bisher kein Glück gehabt.

Zusammenfassend möchte ich den Code in meiner jsFiddle so ändern, dass das Bild jederzeit direkt auf den Mauszeiger zoomt.

Vielen Dank im Voraus an alle, die bereit sind zu helfen.