Grundsätzlich stelle ich diese Frage für JavaScript:Berechnen Sie die Rahmenkoordinaten aus einem gedrehten Rechteck

In diesem Fall:

iX = Breite des gedrehten (blauen) HTML-ElementsiY = Höhe des gedrehten (blauen) HTML-Elementsbx = Breite des Begrenzungsrahmens (rot)by = Höhe des Begrenzungsrahmens (rot)x = X Koordinate des Begrenzungsrahmens (rot)y = Y-Koordinate des Begrenzungsrahmens (rot)iAngle / t = Drehwinkel des HTML-Elements (blau; nicht gezeigt, aber im folgenden Code verwendet), FYI: In diesem Beispiel sind es 37 Grad (nicht, dass es für das Beispiel von Bedeutung ist)

Wie berechnet man das X, Y, die Höhe und die Breite eines Begrenzungsrahmens (alle roten Zahlen), der ein gedrehtes HTML-Element (aufgrund seiner Breite, Höhe und seines Drehwinkels) umgibt, über JavaScript? Ein wichtiger Punkt dabei ist, dass die gedrehten X / Y-Koordinaten des HTML-Elements (blaues Kästchen) irgendwie als Versatz verwendet werden (dies ist im folgenden Code nicht dargestellt). Das muss man sich wohl ansehenCSS3's Transformationsursprung um den Mittelpunkt zu bestimmen.

Ich habe eine Teillösung, aber die Berechnung der X / Y-Koordinaten funktioniert nicht richtig ...

<code>var boundingBox = function (iX, iY, iAngle) {
    var x, y, bx, by, t;

    //# Allow for negetive iAngle's that rotate counter clockwise while always ensuring iAngle's < 360
    t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360);

    //# Calculate the width (bx) and height (by) of the .boundingBox
    //#     NOTE: See https://stackoverflow.com/questions/3231176/how-to-get-size-of-a-rotated-rectangle
    bx = (iX * Math.sin(iAngle) + iY * Math.cos(iAngle));
    by = (iX * Math.cos(iAngle) + iY * Math.sin(iAngle));

    //# This part is wrong, as it's re-calculating the iX/iY of the rotated element (blue)
    //# we want the x/y of the bounding box (red)
    //#     NOTE: See https://stackoverflow.com/questions/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates
    x = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (bx * Math.cos(t) - by * Math.sin(t));
    y = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (-bx * Math.sin(t) + by * Math.cos(t));

    //# Return an object to the caller representing the x/y and width/height of the calculated .boundingBox
    return {
        x: parseInt(x), width: parseInt(bx),
        y: parseInt(y), height: parseInt(by)
    }
};
</code>

Ich fühle mich so nah und doch so fern ...

Vielen Dank für Ihre Hilfe!

DEN NICHT-JAVASKRIPTERN ZU HELFEN ...

Sobald das HTML-Element gedreht wurde, gibt der Browser eine "Matrixtransformation" oder "Rotationsmatrix" zurück, die folgendermaßen zu sein scheint:rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); Weitere Informationen finden Sie auf dieser Seite.

Ich habe das Gefühl, dass dies uns aufklären wird, wie wir das X, Y des Begrenzungsrahmens (rot) nur basierend auf der Breite, Höhe und dem Winkel des gedrehten Elements (blau) erhalten.

Neue Info

Humm ... interessant ...

Jeder Browser scheint die Drehung aus einer X / Y-Perspektive anders zu handhaben! FF ignoriert es vollständig, IE & Opera zeichnen den Begrenzungsrahmen (aber seine Eigenschaften werden nicht angezeigt, dh: bx & by) und Chrome & Safari drehen das Rechteck! Alle melden das X / Y ordnungsgemäß mit Ausnahme von FF. Also ... das X / Y-Problem scheint nur für FF zu existieren! Wie seltsam!

Bemerkenswert ist auch, dass es so scheint$(document).ready(function () {...}); Es wird zu früh ausgelöst, um das gedrehte X / Y zu erkennen (was Teil meines ursprünglichen Problems war!). Ich drehe die Elemente direkt vor dem Aufruf der X / Y-Abfrage$(document).ready(function () {...}); aber sie scheinen erst einige Zeit nach (!?) zu aktualisieren.

Wenn ich ein bisschen mehr Zeit habe, werfe ich eine jFiddle mit dem Beispiel, aber ich verwende eine modifizierte Form von "jquery-css-transform.js", so dass ich vor der jFiddle ein bisschen basteln muss ...

Also ... was ist los, FireFox? Das ist nicht cool, Mann!

Die Handlung verdickt sich ...

Nun, FF12 scheint das Problem mit FF11 zu beheben und verhält sich jetzt wie IE und Opera. Aber jetzt bin ich mit dem X / Y wieder auf dem ersten Platz, aber zumindest glaube ich zu wissen, warum jetzt ...

Es scheint, dass, obwohl das X / Y von den Browsern für das gedrehte Objekt korrekt gemeldet wird, in der nicht gedrehten Version immer noch ein "Geister" X / Y vorhanden ist. Es scheint, als ob dies die Reihenfolge der Operationen ist:

Beginnend mit einem nicht gedrehten Element bei einem X, Y von 20,20Drehen Sie das Element und geben Sie X, Y als 15,35 anVerschieben Sie das Element über JavaScript / CSS nach X, Y 10,10Der Browser dreht das Element logischerweise wieder auf 20,20 zurück, bewegt sich auf 10,10 und dreht sich dann erneut, was zu einem X, Y von 5,25 führt

Also ... Ich möchte, dass das Element 10,10 nach dem Drehen erreicht, aber dank der Tatsache, dass das Element (scheinbar) nach dem Verschieben erneut gedreht wird, unterscheidet sich das resultierende X, Y von der Menge X, Y.

Das ist mein Problem! Also, was ich wirklich brauche, ist eine Funktion, um die gewünschten Zielkoordinaten (10,10) zu nehmen und von dort aus rückwärts zu arbeiten, um die X, Y-Startkoordinaten zu erhalten, die dazu führen, dass das Element in 10,10 gedreht wird. Zumindest weiß ich jetzt, was mein Problem ist, denn dank der inneren Funktionsweise der Browser scheint es mit einem gedrehten Element 10 = 5!