用javascript旋转图像或div？

Question

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

使用jQuery UI Draggable解决拖放问题。

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

如果他们只旋转22,5-45-67,5-90度

，也没关系

所以我想到3个解决方案

1. 使用画布

   问题：IE支持

2. 使用div s

   问题：它还需要画布旋转

3. PHP GD

   这个解决方案是唯一的希望。

   它是如何工作的：应用程序将预渲染（22,5 * x）原始图像的旋转版本。因此，只要用户想要旋转图像，它们就会准备就绪。

请帮忙。任何建议赞赏

Answer 1

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

Raphael 非常好，试一试：

• http://raphaeljs.com/

您可以在此处找到有关使用raphael旋转的更多信息：

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

Answer 2

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

Rotate image clockwise or anticlockwise inside a div using javascript

Answer 3

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

Answer 4

你不能直接用Javascript操纵图像而不是调整它们（这在技术上是用CSS完成的，而不是Javascript ......）。最好的解决方案是使用Raphaël;它将允许您进行鼠标调整，也可以拖放，它也可以使用JQuery构建。

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