旋转轮或360度旋转轮

Question

我正在寻找一些jquery插件或多个旋转车轮或360度旋转车轮的任何代码示例。 所附的演示图像是我正在寻找的解决方案，所有的轮子都可以旋转，这基本上是开发日期选择，有点像台式机和移动应用程序...但是我需要我的Web应用程序。 我正在使用PHP和Apache Web服务器。

在此先感谢您提出的任何想法，相同的代码或类似的解决方案

-Himanshu

Answer 1

是的，HTML5 canvas rotation（）是实现此目的的方法。 我的网站http://www.dougtesting.net具有使用画布旋转功能的制胜轮，但仅用于一个轮幅图像。 该代码已完全注释，因此您可能会发现它是一个有用的起点。

对于您的项目，您可能需要将多个图像渲染到画布上并旋转到所需的角度。 另外，您可能还需要查看mouseDown，mouseMove和mouseUp代码，以允许用户将滚轮拖动到所需位置，并且该代码能够告诉您所指向的值（这是我获奖的滚轮中的某些代码）也可以）。

Answer 2

我不知道有任何现成的解决方案，但是我可以指出两个方向：

• 您可以使用正确的尺寸为3个不同的车轮中的每个车轮制作图像，然后使用css3转换使用javascript（ https://developer.mozilla.org/en/CSS/transform#rotate ）旋转特定的车轮。
• 另一个选择是查看html5 canvas标签并用手将轮子绘制到该标签上。 这是一个教程，内容涉及在canvas标签上制作轮盘游戏，与您的要求大不相同，但确实描述了必要的技术。 http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas

Answer 3

我不知道完全符合您要求的jQuery插件。 在浏览器兼容性方面，我建议您看一下出色的RaphaelJS JavaScript库。 它允许您使用矢量图形绘制和旋转车轮。 最重要的是，该库与IE6 +兼容，并且可以在大多数（即使不是全部）现代网络浏览器中使用，包括平板电脑和手机。

为了简化必要的矢量图形的创建，您可以在所选的矢量图像编辑器（例如Illustrator，Inkscape等）中绘制滚轮，并将矢量图像另存为SVG文件。 一个非常方便的在线伴侣工具ReadySetRaphael将SVG文件作为输入，并生成必要的JavaScript以自动绘制图形。

如果在JavaScript中将矢量图形的路径作为对象，则可以使用Element.rotate()方法轻松旋转它。

Answer 4

尽管我不确定是否存在用于此目的的插件；但是在我当前的项目中，我们使用canvas API创建了一个上下文菜单，该菜单与您的要求没有什么不同，即使稍微复杂一点。 因此，如果您不受限制，我强烈建议您使用HTML5 Canvas api来执行此操作。 您可以使用交互式花卉教程中的一些想法。

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/

如果您有兴趣将jQuery投入使用，这也应该有所帮助。 http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/