可旋转的图像或div与javascript？

Question

我正在研究一个Web应用程序，它需要允许用户拖放以及旋转图像。

拖放是通过jQuery UI Draggable解决的。

但我如何旋转页面上的图像？我的图像大多是一个彩色矩形。我用div s在页面上绘制它们，但是如何旋转它们？

这是好的，如果他们只旋转22，5-45-67，5-90度

所以我觉得3个解决方案

1. 使用Canvas

   问题：IE浏览器的支持

2. 使用div小号

   Proble L：它也需要画布旋转

3. PHP GD

   该解决方案是唯一剩下的希望。

   它是如何工作的：应用程序将预渲染（22.5 * x）原始图像的旋转版本。所以无论何时用户想要旋转图像，它们都会准备就绪。

请帮忙。任何建议赞赏

Answer 1

一个可能的解决方案是使用一个JavaScript图形矢量库，它可以在IE上使用时自动使用画布的替代方法。

拉斐尔是一个非常好的一个，试试看：

• http://raphaeljs.com/

您可以找到有关旋转更多的信息与拉斐尔的位置：

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

Answer 2

服务器端方法听起来有点浪费（所有版本的图像需要下载），我敢说你应该尝试使用Flash的跨浏览器和客户端解决方案。

Answer 3

除了调整大小，你不能直接用Javascript处理图像（这是用CSS技术完成的，而不是Javascript ...）。最好的解决方案是使用Raphaël;它会允许你调用，但也可以拖放，而且它也是使用JQuery构建的。

当然，您可以交替使用不同的图像状态，并将它们用作旋转矩形的“精灵”，但不能在其中播放可扩展性。 （GD是一个糟糕的设计，不要使用它。）

Answer 4

看看： http://www.dyn-web.com/code/rotate_images/

Rotate image clockwise or anticlockwise inside a div using javascript