纺车轮或360度旋转轮

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

enter image description here

预先感谢任何想法或sameple代码或similer解决前进

-Himanshu

来源

2012-03-27 Himanshu Patel

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

你可以为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

来源

2012-03-27 10:24:52

嗨大卫，谢谢你的提示作出回应。我有lreadt检查第二个链接，但它有一些跨浏览器的问题，特别是对于IE，它现在在IE中工作....让我试着分析第一个链接 – 2012-03-27 11:33:44

这两个* *不会*在IE9之前工作，如果你想让IE8兼容，你将不得不旋转图像服务器端或进入ms特定的欺骗。如果您想采用“干净”的方法，您可以在这里看到可用性表格http://caniuse.com/#search=transformat（第一种方法）和http://caniuse.com/#search=canvas（第二种方法）。最后，如果你想用ms欺骗http://code.google.com/p/jqueryrotate/wiki/Examples为你处理这个好看，但我没有使用过这个插件。 – 2012-03-27 13:41:13

humm。让我试试一次......我想要支持IE7及更高版本，Crome和FF ......所以寻找浏览器友好的解决方案，至少我已经介入了。 – 2012-03-29 08:13:48

我不知道一个jQuery插件完全符合你的要求。在浏览器兼容性方面，我建议你看看优秀的RaphaelJS JavaScript库。它允许您使用矢量图形绘制和旋转轮子。最重要的是，这个库是IE6 +兼容的，并且适用于大多数现代网页浏览器，包括平板电脑和手机。

为了缓解必要的矢量图形的创作，你可以画出你的选择（例如插图，Inkscape中，等..）的矢量图像编辑器，车轮和保存矢量图像SVG文件。一个非常方便的在线伴侣工具ReadySetRaphael将SVG文件作为输入，并生成必要的JavaScript以自动绘制图形。

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

来源

2012-09-06 10:58:50

虽然我不知道，如果一个插件存在此目的;在我目前的项目中，我们使用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/

来源

2012-09-06 11:05:46 TWickz

是HTML5画布旋转（）是去与此的方式。我的网站http://www.dougtesting.net有一个使用画布旋转的获奖轮子，但仅限于一个轮子图像。该代码已完全注释，因此您可能会发现它是一个有用的起点。

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

来源

2013-07-16 09:45:09

纺车轮或360度旋转轮

回答

相关问题