Das Rasterbild ist nicht zentriert, nachdem in Paper.js ein Zoom auf die Seitengröße vorgenommen wurde
Ich arbeite an einer Paper.js-Anwendung, die ein raster (ein Bild) in view einfügt. Dann zoomt es, um das Bild so anzupassen, dass alles gleichzeitig sichtbar ist. Es funktioniert meistens, aber das Bild endet wie folgt:
Wenn es eher so aussehen sollte:
Hier ist der Code, der view erstellt, das Bild hinzufügt und den Aufruf zum Zoomen anpasst:
Und hier ist die panAndZoom.changeZoom Methode:
Irgendeine Idee, warum es zoomt, um zu passen, aber die Zentrierung verliert?
1 Antwort
TL; DR
Verwenden Sie beides, aber nicht beides:
-
Nach dem Zoom:
%Vor% -
Beim Einfügen des Bildes:
%Vor%
Die lange Antwort
Als Haftungsausschluss muss ich darauf hinweisen, dass ich keine Kenntnisse von paper.js habe und ihre Dokumentation scheinbar schrecklich aussieht. Diese Antwort ist aus dem Geigenbau entstanden.
Ich habe Ihren Code mehr oder weniger repliziert und nach einigem Basteln konnte ich das Problem mit folgendem beheben:
%Vor% Wenn Sie sich fragen, warum ich nicht auf die Dokumentation von setCenter zeige, liegt das daran, dass ich keine finden konnte. Ich habe diese Methode entdeckt, indem ich paper.view.center untersucht habe.
Obwohl ich nicht zufrieden war, konnte ich nicht verstehen, warum das funktionieren würde. Daher habe ich deinen Code immer wieder angeschaut und folgendes bemerkt:
%Vor% Die Dokumentation zu raster sagt uns Folgendes:
Erstellt ein neues Rasterelement aus dem übergebenen Argument und platziert es in der aktiven Ebene. Objekt kann entweder ein DOM-Bild, ein Canvas oder eine Zeichenfolge sein, die die URL zum Laden des Bilds oder die ID eines DOM-Elements zum Abrufen des Bilds (entweder ein DOM-Bild oder ein Canvas) beschreibt.
Parameter:
Quelle : HTMLImageElement / HTMLCanvasElement / String - die Quelle des Rasters - optional
Position : Punkt - die Mittelpunktposition, an der das Rasterelement platziert wird - optional
Nach meinem Verständnis wird das Bild auf der Leinwand eingefügt, wobei sich sein Mittelpunkt in der Position 0,0 befindet, auch bekannt als obere linke Ecke . Dann wird der Inhalt der Zeichenfläche in der Größe angepasst, aber basierend auf ihrer eigenen Mittelposition. Dies zieht das Bild näher an die Mitte der Leinwand, aber es gibt immer noch eine Diskrepanz.
Wenn Sie das Zentrum auf 0,0 einstellen, werden einfach die Mittelpunkte des Bildes und der Leinwand synchronisiert.
Es gibt auch einen alternativen Weg, das Bild an der aktuellen Mitte des Canvas einzufügen, was richtiger erscheint:
%Vor%Hier ist das rudimentäre JSFiddle zum Experimentieren.
Tags und Links javascript image zooming raster paperjs