Прялка или вращение на 360 градусов

Question

Я ищу какой-нибудь плагин jquery или примеры кода для нескольких вращающихся колес или колес на 360 градусов. Приложено демонстрационное изображение, для которого, я ищу решение, где все колеса можно вращать, и это в основном разработка выбора даты рождения, чем-то вроде настольного и мобильного приложения ... Но мне нужно для моего веб-приложения. Я использую веб-сервер PHP & Apache.

Заранее спасибо за любую идею, один и тот же код или аналогичное решение для продвижения вперед

-Himanshu

Answer 1

Да, HTML5 canvas rotate () - это то, что нужно. У моего сайта http://www.dougtesting.net есть выигрышное колесо, которое использует вращение холста, но только для одного изображения колеса. Код полностью прокомментирован, поэтому вы можете найти его полезной отправной точкой.

Для вашего проекта вам, вероятно, понадобится несколько изображений, которые визуализируются на холсте и повернуты на нужные углы. Кроме того, вам, вероятно, понадобится заглянуть в код mouseDown, mouseMove и mouseUp, чтобы пользователь мог перетаскивать колеса в нужное место, а код может сообщать вам значения, на которые указывает (что-то код в моем выигрышном колесе) тоже можно сделать).

Answer 2

Я не знаю ни одного готового решения, но могу указать вам два направления, по которым вы можете пойти:

• Вы можете сделать изображение для каждого из 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 3

Хотя я не уверен, существует ли плагин для этой цели, в моем текущем проекте мы создали контекстное меню, используя холст API, который ничем не отличается от вашего требования, если не немного сложнее.Поэтому я настоятельно рекомендую использовать API HTML5 Canvas, если вы не ограничены в этом.Вы можете использовать несколько идей из интерактивного учебника по цветам.

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/

Answer 4

Мне не известен плагин jQuery, который делает именно то, что вы просите.Что касается совместимости с браузерами, я рекомендую вам взглянуть на превосходную RaphaelJS библиотеку JavaScript.Это позволяет рисовать и вращать колесо, используя векторную графику.Лучше всего то, что эта библиотека совместима с IE6 + и работает в большинстве, если не во всех современных веб-браузерах, включая планшеты и мобильные телефоны.

Чтобы упростить создание необходимой векторной графики, вы можете нарисовать колесо в векторном изображении.редактор по вашему выбору (например, Illustrator, Inkscape и т. д.) и сохраните векторное изображение в виде файла SVG.Очень удобный онлайновый сопутствующий инструмент под названием ReadySetRaphael принимает файл SVG в качестве входных данных и создает необходимый JavaScript-код для автоматического рисования графики.

Если у вас есть путь к векторной графике в качестве объекта вJavaScript, его легко повернуть методом Element.rotate().