Drehbares Bild oder div mit Javascript?

Question

Ich arbeite an einer Webanwendung, die es dem Benutzer ermöglichen soll, ein Bild zu ziehen und zu löschen sowie ein Bild zu drehen.

Drag & Drop ist mit der jQuery UI Draggable gelöst.

Aber wie soll ich ein Bild auf der Seite drehen? Meine Bilder sind meist einfarbige Rechtecke. Ich benutzte div s, um sie auf der Seite zu zeichnen, aber wie man sie dreht?

Es ist in Ordnung, wenn sie nur 22 drehen, 5-45-67, 5-90 Grad

Ich denke also von 3 Lösungen

1. Leinwand Mit

   Problem: IE-Unterstützung

2. Mit div s

   Proble m: es muss auch Leinwand

3. PHP GD

   Diese Lösung drehen ist die einzige Hoffnung, die noch übrig.

   Wie es funktionieren könnte: Die Anwendung wird (22,5 * x) gedrehte Versionen des Originalbildes prerender. Sie sind also bereit, wenn der Benutzer ein Bild drehen möchte.

Bitte helfen. Irgendwelche Vorschläge geschätzt

Answer 1

Eine mögliche Lösung ist die Verwendung einer JavaScript-Grafikvektorbibliothek, die automatisch eine Alternative zu Canvas verwenden kann, wenn sie im IE verwendet wird.

Raphael ein wirklich gut ist, es zu versuchen:

• http://raphaeljs.com/

Sie weitere Informationen über Rotation mit raphael finden Sie hier:

• How do I rotate a div with Raphael.js?

Answer 2

Die serverseitige Methode klingt ein wenig verschwenderisch (alle Versionen des Bildes müssen heruntergeladen werden), wage ich zu sagen, Sie sollten versuchen, Flash für eine Cross-Browser-und Client-seitige Lösung zu verwenden.

Answer 3

Sie können das Bild nicht direkt mit Javascript bearbeiten, außer die Größe zu ändern (und dies wird technisch mit CSS gemacht, nicht mit Javascript ...). Die beste Lösung wäre Raphaël; Es ermöglicht Ihnen, zu bewerten, aber auch Drag & Drop, und es wird auch mit JQuery erstellt.

Natürlich können Sie auch unterschiedliche Bildzustände verwenden und sie als "Sprites" für Ihre gedrehten Rechtecke verwenden, jedoch wird dort keine Erweiterbarkeit wiedergegeben. (GD ist ein schlechtes Design, benutze das nicht.

)

Answer 4

einen Blick: http://www.dyn-web.com/code/rotate_images/

Rotate image clockwise or anticlockwise inside a div using javascript