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

Question

[nasvek]

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

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

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

Фотографию примера приложил

Answer 1

[Danny Arty]

На winwheel.js есть пример с картинкой. Тоже такое колесо ставил на сайт, но использовал готовое решение

Comments

[nasvek]

Спасибо за ответ, да видел данное решение, однако всему мешает CANVAS, он рисует крайне криво и нет возможности вставить красивые элементы

Answer 2

[Владимир Беляев]

во-первых, я бы посоветовал перенести логику вращения на бэк, чтобы ваше колесо не взломали из под клиента. во-вторых, можно переверстать "барабан", поделив картинку на сектора и собрать из него свой барабан из html элементов. а их уже проиндексировать и докручивать барабан под индекс, который прийдет из бэка. либо визуально поделить картнинку на сектора и анимацию соотнести с центрами секторов, и останавливать, когда нужно

Comments

[nasvek]

Спасибо за ответ
1) Логика будет на бек
2) Это гораздо сложнее особенно в плане адаптивности все по кусочкам собираться, гораздо легче оптимизировать цельную картинку

[Владимир Беляев]

nasvek, тогда нужно получить с бэка ранд. число 0-359. и посчитать сектор из расчета Math.floor(k/(360/n))
где k - число с бэка 0-360. n - кол-во секций барабана. округляем в меньшую сторону. то бишь
Math.floor(242/(360/3)) = 2. выпала 2 секция. отсчет секций от 0.