Круглый интерфейс на jQuery?

Question

[Name_One]

Уже имеется:
https://jsfiddle.net/Placebooo/8rp6Lmq3/
Но, есть небольшой баг/недочёт. Это заметно, если навести курсор на нижнюю точку, затем на правую. Подскажите, как лучше всего это осуществить?

Answer 1

[Дмитрий Богомолов]

Решение в продолжение к предыдущим ответам
Как было подмечено ранее, все баги от перехода через 360/0. Добавляем переменную с полными кругами и прибавляем(отнимаем) ее к требуемому углу, плюс храним предыдущее состояние для определения перехода через 360 в обоих направлениях.

Либо, можно пойти более сложным и некрасивым путем: при попадании на 0 после 270 отрабатываем переход на 360, отключаем анимацию, переходим на 0, включаем анимацию, то же самое при переходе с 0 на 270, только в обратном порядке. Тогда можно обойтись без переменной с циклами на 360 и не будет опасности напороться на пользователя, который накрутит угол до состояния, когда он выйдет за пределы типа.

Answer 2

[Денис Инешин]

1. Вам нужно ввести переменную previous_point
2. При каждом наведении, сохранять в нее текущую позицию
3. Дальше вам нужно усложнить условия, что-то вроде:

$(".right").on("hover", function () {

if (previous_point === "bottom") {
    arrow.css({ transform: 'rotate(290deg)' }); // цифра от балды
} else {
    arrow.css({ transform: 'rotate(180deg)' });
}

});

Comments

[Name_One]

Не особо понятно что с этим делать...

[Денис Инешин]

Name_One: ну это должно натолкнуть вас на мысль, как решить) это сервис подсказок, а не готовых решений.

[Name_One]

Денис Инешин: А Вы уверены что это должно сработать? Я сижу, пробую, но получается ахинея ещё хуже...

[Денис Инешин]

Name_One: так вы показывайте промежуточные результаты, мы посмотрим.

Answer 3

[Rou1997]

Посмотрел, не совсем понял, о чем речь, видимо, баг не столь серьезен, чтобы быть заметным вне контекста. :) Как по мне, для интерфейса приложения предназначенного для работы, а не для игр, -подобное решение более чем годно, гораздо критичнее не какой-то там баг или "артефакт", а большая удаленность точек, из-за чего утомительно водить курсором и сложно попадать по маленьким точкам.
В чем все-таки баг, для начала?
Вас не устраивает быстродействие анимации? Или алгоритм - то, что "стрелка" проходит не оптимальный путь?

Comments

[Name_One]

Это чисто ради примера. Разумеется, размеры будут другими. Да, проблема именно с алгоритмом.

[Rou1997]

Name_One: Видимо, стандартный rotate из CSS3 не гарантирует оптимальность маршрута, поэтому нужно просто на JS менять градусы поворота в зависимости от положения, я думаю все-таки можно найти решение и без JS, но это заняло бы время, если это стоит того - "копайте".

Answer 4

[Dark Hole]

Приблизительное решение
Пока еще не без багов, но все-таки

Баги идут от need + 360. Дело в том, что при полном круге выходит так, что cur = need + 360, что и порождает проблемы.