纺车轮或360度旋转轮

Question

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

提前感谢任何想法或相同的代码或similer解决方案向前推进

-Himanshu

Answer 1

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

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

Answer 2

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

对于您的项目，您可能需要多个图像渲染到画布并旋转到所需的角度。此外，您可能需要查看mouseDown，mouseMove和mouseUp代码，以允许用户将轮子拖动到所需位置，代码可以告诉您指向的值（我的获胜轮中的代码）也可以）。

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/