Positionselement über dem anderen positionieren, nachdem es skaliert wurde
Ich implementiere ein Tool zum Beschneiden von Bildern, das auf Croppie basiert. Mein Problem ist, dass, wenn ich zu weit herauszoom, das Bild das Ansichtsfenster verlässt oder zu weit vom Zuschneidebereich entfernt ist.
Also habe ich eine Funktion, online (Code-Snippet unten) 363, die so ist:
%Vor% Das Positionieren des Elements, nachdem es zu weit herausgezoomt wurde, wird von der Logik in der Bedingung if (!isContainedByCrop(imgRect, cropRect, transform)) behandelt, wobei "adjust center" protokolliert wird.
Ich habe viele Möglichkeiten ausprobiert, dies zu tun. Ich habe versucht, die Distanzformel zu verwenden, bin aber verwirrt, weil ich übersetzte Werte nicht mit (x, y) Punkten vergleiche. Grundsätzlich sollte es in das Zuschneidewerkzeug passen, sobald es unter eine bestimmte Menge schrumpft.
Ich kann jedoch nicht erreichen, dass es sich konsequent verhält. Wenn ich es auf 150 x 150 Pixel verkleinere, wird es manchmal im Zuschneidewerkzeug zentriert, manchmal nicht.
Skalierung erhöht die Komplexität (für mich). Wenn du es nicht skalierst, wäre es eine einfache Gleichung, übersetze einfach die .enclosedCrop getBoundingClientRect().top (der weiße zentrierte Kreis) minus die getBoundingClientRect().top des Bildes (das gleiche gilt für die x Werte) und es würde gehen wo es soll. Aber weil ich es skaliere, ändert sich der Standort und ich weiß nicht, wie ich es erklären soll.
Es hat auch in der Vergangenheit (abhängig von der Gleichung, auf der ich mich beruhige) nur funktioniert, wenn ich das Bild nicht durch Ziehen der Maus in bestimmte Richtungen positioniere. Die Gleichung sollte funktionieren, egal wie ich das Bild übersetze / skaliere.
Skalierung ändert den Standort eines Elements wie folgt:
Hier ist ein Versuch mit einer Distanz (wie) Formel:
%Vor%Es funktioniert nicht, weil ich nicht versuche, den Abstand zwischen zwei Punkten zu ermitteln. Stattdessen versuche ich, entlang der X- und Y-Achse entsprechend zu verschieben, um das Bild über dem Kornkreis zu positionieren. Wenn ich versuche, links von links und oben von oben zu subtrahieren, scheint das auch nicht zu funktionieren.
Angesichts dieser zwei Graphen verstehe ich nicht warum:
%Vor%funktioniert nicht ...
Außerdem, wenn ich ein Bild habe und ich es mit css("transform","scale(1.1) skaliere, scheint es sich dort zu verhalten, wo der .getBoundingClientRect().top Wert nach unten geht, nicht nach oben, was den MDN Graph für mich verwirrender macht, soweit ich das beurteilen kann Sie zeigen das Gegenteil. Vielleicht ist es ein CSS-Problem?
1 Antwort
Die transform wird auf die ursprüngliche Position angewendet. Daher sind Berechnungen, die die transform berücksichtigen, um transform anzupassen, notwendigerweise kompliziert. Sie müssen die Reihenfolge der Transformationen, die ursprüngliche Position und den Transformationsursprung berücksichtigen.
Hier wird zum Beispiel ein Quadrat, das 100 px links und auf 0,5 skaliert ist, auf Position 125 px sein. Zuerst wird es auf 100px verschoben und dann von der Mitte skaliert, also auf 125px. Wenn Sie vorher skalieren, dann sind Sie bei 75px. Von der Mitte auf 50 px skaliert (also bei 25px links), dann 100px skaliert auf 50px skaliert. Die richtigen Koordinaten zu finden, kann kompliziert sein.
Ein einfacherer Ansatz in Ihrem Fall wäre meiner Meinung nach, mit transform-origin zu arbeiten. Ihre Funktion updateCenter ist genau das, was transform-origin tut, sie definiert das Zentrum. Und es ist eingebaut. Alle Berechnungen werden von der Transformation übernommen. Sie müssen nur die Herkunft definieren, die Sie brauchen, und es ist ziemlich einfach.
Nehmen wir an, Sie möchten, dass das Zentrum der Punkt ist, der in Ihrem Beispiel in der Mitte des Kreises liegt. Sie müssen herausfinden, mit welchem Prozentsatz dieser Punkt auf dem Bild Ihrer Transformation ist. Es ist im Grunde das
%Vor%Was in Ihrem Fall gibt:
%Vor% matrix.41 ist die linke Übersetzung des Bildes, die Sie auf diese Weise finden können (siehe folgende Antwort: Wie bekomme ich value translateX by javascript ):
dann weisen Sie zu:
%Vor%Natürlich müssen Sie dies nur beim Verschieben des Bildes machen, nicht beim Zoomen, da dann der Ursprung bereits behandelt wird. Sie können auch nur unter bestimmten Bedingungen anpassen, aber auf keinen Fall müssen Sie über die Übersetzung und den Zoom nachdenken.
Tags und Links javascript math