Durch die Kombination von CSS und Jquery UI / draggable habe ich die Möglichkeit geschaffen, ein Bild zu schwenken und mit ein wenig zusätzlichen JS können Sie nun das Bild zoomen.
Das Problem, das ich habe, ist, dass, wenn Sie in die obere linke Ecke des Bildes vergrößern, wie Sie es erwarten würden, behoben sind. Was ich möchte ist, dass das Bild zentral bleibt (basierend auf dem aktuellen Schwenk), so dass die Mitte des Bildes in der Mitte des Containers bleibt, während es größer wird.
Ich habe einen Code dafür geschrieben, funktioniert aber nicht, ich erwarte, dass meine Mathematik falsch ist. Könnte jemand helfen?
Ich möchte, dass es wie funktioniert . Wenn Sie in ein Bild blättern, wird das Bild basierend auf dem aktuellen Bild zentriert und nicht aus der Ecke herausgezoomt.
HTML:
%Vor%Javascript:
%Vor%Lange Rede, kurzer Sinn, Sie müssen eine Transformationsmatrix so skalieren, dass sie um den gleichen Betrag wie das Bild skaliert und dann die Position des Bildes unter Verwendung dieser Matrix transformiert. Wenn diese Erklärung für Sie komplett griechisch ist, suchen Sie nach "image transforms" und "matrix math".
Der Anfang dieser Seite ist eine ziemlich gute Ressource, mit der man beginnen kann, obwohl es eine andere Programmiersprache ist: Ссылка
Jedenfalls habe ich diese Methoden in einigen meiner eigenen Projekte implementiert. Hier ist die Zoom-Funktion von etwas, das ich geschrieben habe und das so funktioniert, wie du es willst:
%Vor%Beachten Sie die Befehle "new Vector.create ()" und "Matrix.I (3)". Diese kommen von der JavaScript Vektor / Matrix Math Bibliothek Ссылка
Dann notieren Sie "transformPoint ()". Das ist eine der Funktionen dieses ActionScript-Links (plus Hinweise zu Ссылка ), die ich mit sylvester.js implementiert habe
Für die ganze Reihe von Funktionen schrieb ich:
%Vor%Tags und Links javascript jquery image jquery-ui zoom