JQuery: создание кругового слайдера
Возможно, вы уже видели слайдеры JavaScript раньше:
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
Я представляю себе круглый слайдер. Он будет состоять из перетаскиваемой кнопки в одной точке круга, и эту кнопку можно перетаскивать в любом месте кольца. Значение зависит от того, в каком положении находится кнопка (подумайте о часах).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
определить центральную точку c текущая точка мыши в m
в обработчике события перетаскивания мыши у вас будет
var dx = m.x-c.x;
var dy = m.y-c.y;
var scale = radius/Math.sqrt(dx*dx+dy*dy);
slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;
радиус будет некоторым предустановленным значением ползунка,
Математика того же вопроса довольно проста, но как бы вы реализовали интерфейс? как вы структурируете это, используя div и тому подобное?
Математика: Параметрическое уравнение окружности mathopenref.com/coordparamcircle.html
Как насчет этого: http://www.thewebmasterservice.com/dev-blog/curved-ounded-or-circular-sliders-javascript-jquery-ui
Некоторые пояснения и демонстрация.
Я написал плагин jQuery, который поддерживает ползунки полного / полукруга.
Проверьте плагин jQuery roundSlider отсюда http://roundsliderui.com/. Это именно то, что вам нужно.
Этот круглый слайдер имеет такие же параметры, как слайдер jQuery ui. Он поддерживает тип ползунка по умолчанию, минимальный диапазон и диапазон. Не только круглый слайдер, он также поддерживает различные формы круга формы круга, такие как четверть, половина и пирог.
Для получения дополнительной информации посетите страницу демонстрации и документация.
Пожалуйста, проверьте демо от jsFiddle.
Связанные ответы:https://stackoverflow.com/a/31367164/1845801 и https://stackoverflow.com/a/31369265/1845801
Скриншоты:
как бы вы это реализовали? Я искал то же самое и нашел эту ветку, но я понятия не имею, как бы реализовать этот код