带有javascript的可旋转图像或div？

Posted 2023-02-25

【中文标题】带有javascript的可旋转图像或div？

【英文标题】：Rotatable image or div with javascript?

【发布时间】：2010-11-29 12:29:40

【问题描述】：

我正在开发一个需要允许用户拖放和旋转图像的网络应用程序。

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

但是我应该如何旋转页面上的图像？我的图像大多是一种彩色矩形。我用divs 在页面上画了它们，但是如何旋转它们呢？

它们只旋转 22、5-45-67、5-90 度就可以了

所以我想到了 3 个解决方案

使用画布

问题：IE 支持

使用divs

问题：它还需要画布旋转

php GD

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

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

请帮忙。任何建议表示赞赏

【参考方案1】：

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

拉斐尔确实不错，试试看：

http://raphaeljs.com/

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

How do I rotate a div with Raphael.js?

【参考方案2】：

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

Rotate image clockwise or anticlockwise inside a div using javascript

【讨论】：

raphael 库似乎更灵活，非常感谢您的建议 :)

【参考方案3】：

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

【讨论】：

好吧 :/ 我的客户不喜欢 flash 谢谢你的建议 :)

【参考方案4】：

除了调整图像大小之外，您不能直接使用 Javascript 操作图像（这是通过 CSS 技术完成的，而不是 Javascript...）。最好的解决方案是使用Raphaël；它可以让你评价，也可以拖放，它也是使用 JQuery 构建的。

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