Finden Sie die Koordinaten der Ecken eines gedrehten Objekts in fabricjs

Question

Angenommen, ich habe ein Bild in einem Fabricjs Canvas. Ich kann leicht die Koordinaten der Ecken basierend auf den top & left Werten und der Größe des Bildes berechnen.

Wie kann ich das tun, wenn das Bild um einen Grad gedreht wird?

Beispiel:

EDIT: Vorzugsweise ohne die Verwendung von Trigonometrie, wenn es eine einfachere Methode in fabricjs implementiert selbst oder irgendwo anders.

Answer 1

Ja, natürlich.

Wir speichern diese Koordinaten in Objekt oCoords

oCoords.tl.x, oCoords.tl.y // top left corner 
oCoords.tr.x, oCoords.tr.y // top right corner 
oCoords.bl.x, oCoords.bl.y // bottom left corner 
oCoords.br.x, oCoords.br.y // bottom right corner 

Das ist, was gesetzt wird, wenn Sie setCoords Methode aufrufen.

Aber Sie wollen wahrscheinlich nicht mit denen zu tun haben.

Seit Version ~ 1.0.4 haben wir getBoundingRect Methode für alle Objekte, die { left: ..., top: ..., width: ..., height: ... } zurückgibt. Wir hatten bereits getBoundingRectWidth und getBoundingRectHeight vor (jetzt veraltet), aber getBoundingRect ist sicherlich nützlicher; es erlaubt, auch die linken/oberen Werte zu lesen.

Sie es in Aktion bei http://fabricjs.com/bounding-rectangle/ sehen (rotierende Objekte versuchen)