@nasvek

Как определить зону отображения картинки JS?

Добрый день, столкнулся с такой проблемой, что не понимаю как реализовать следующую задачу

Что мы имеем:
Нужно сделать рулетка (колесо фортуны), которое при нажатии на кнопку SPIN начинает крутиться и после завершения прокрутки, зеленая стрелка указывает на выпавший приз

Проблема:
Колесо я сверстал, анимацию сделал, прокрутку сделал, однако как определить выпавший сектор??? Получается, что колесо само по себе является отдельной картинкой (которая поделена на секторы), соответственно для анимации картинки используется ROTATE, мне кажется что картинку нужно как-то поделить на координаты секторов, далее необходимо определить координаты X и Y у наконечника стрелки и соотнести координаты стрелки с координатами сектора над которым она находится, я не знаю правильно ли я думаю, однако прошу помощи с этим вопрос, как это реализовать, в каком направлении двигаться, буду крайне признателен, если поделить на секторы, то как это реализовать?

Фотографию примера приложил
5f69c83c68330438645494.png
  • Вопрос задан
  • 139 просмотров
Решения вопроса 1
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
На winwheel.js есть пример с картинкой. Тоже такое колесо ставил на сайт, но использовал готовое решение
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kit91ka
angular, angularJS программист
во-первых, я бы посоветовал перенести логику вращения на бэк, чтобы ваше колесо не взломали из под клиента. во-вторых, можно переверстать "барабан", поделив картинку на сектора и собрать из него свой барабан из html элементов. а их уже проиндексировать и докручивать барабан под индекс, который прийдет из бэка. либо визуально поделить картнинку на сектора и анимацию соотнести с центрами секторов, и останавливать, когда нужно
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы