Image ou div rotative avec javascript?

Question

Je travaille sur une application web qui doit permettre à l'utilisateur de glisser et déposer ainsi que de faire pivoter une image.

Glisser-déposer est résolu avec le glisser-déplacer jQuery UI. Mais comment puis-je faire pivoter une image sur la page? Mes images sont principalement des rectangles de couleur unique. J'ai utilisé div s pour les dessiner sur la page mais comment les faire pivoter?

Il est correct s'ils tournent seulement 22, 5-45-67, 5-90 degrés

Je pense à 3 solutions

1. Utilisation Toile

   Problème: support IE

2. l'utilisation div de

   de Proble m: il faut aussi faire tourner la toile

3. PHP GD

   Cette solution est le seul espoir qui a laissé. Comment cela pourrait-il fonctionner? L'application prérendra (22,5 * x) les versions pivotées de l'image originale. Donc, ils seront prêts chaque fois que l'utilisateur veut faire pivoter une image.

Aidez-nous s'il vous plaît. Toute suggestion appréciée

Answer 1

Une solution possible est d'utiliser une bibliothèque JavaScript vecteur graphique qui peut utiliser automatiquement une alternative à la toile lorsqu'il est utilisé sur IE.

Raphael est vraiment bon, essayer:

• http://raphaeljs.com/

Vous pouvez trouver plus d'informations sur la rotation avec raphael ici:

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

Answer 2

La méthode côté serveur est un peu inutile (toutes les versions de l'image doivent être téléchargées), j'ose dire que vous devriez essayer d'utiliser Flash pour une solution cross-browser et côté client.

Answer 3

Vous ne pouvez pas manipuler une image directement avec Javascript en dehors de les redimensionner (et cela est techniquement fait avec CSS, pas Javascript ...). La meilleure solution serait d'utiliser Raphaël; il vous permettra de ratatiner, mais aussi glisser et déposer, et il est également construit en utilisant JQuery.

Bien sûr, vous pouvez alternativement utiliser différents états d'image et les utiliser comme des "sprites" pour vos rectangles pivotés, mais vous ne pourrez pas y jouer d'extensibilité. (GD est un mauvais design, ne l'utilisez pas.)

Answer 4

un coup d'oeil: http://www.dyn-web.com/code/rotate_images/

Rotate image clockwise or anticlockwise inside a div using javascript

bien