Как реализовать Вращение объекта за хвостик Javascript?

Question

[Егор Шустров]

Здравствуйте. подскажите кто либо что то я запутался....
У меня есть блок на странице, и у него есть некий хвостик.
так вот при нажатии мышкой на хвостик, и если мы его будем тянуть, соответственно должны вращать блок.
https://js.do/code/168272
в примере хвостик это красный блок, а то что должны вращать это желтый блок.
и в HTML все верно, хвостик должен врощатся вместе с главным блоком....
не могу понять как это реализовать может кто сталкивался подскажите плз....

Comments

[kulaeff]

Тут $('.target-rotation').on('mousemove',move) и тут $('.target-rotation').on('mousemove',move) селектор надо поменять на document.body и тогда блок начинает вращаться. Правда вращается он кривовато, возможно с формулой что-то не так.

[Егор Шустров]

kulaeff, не в этих мелочах вопрос )) а в математической формуле для вращения блока. то как выделить селектор это дело 2е)))

Answer 1

[Сергей Соколов]

Math.atan2() возвращает угол в радианах. Их же можно потом использовать в transform: rotate( 123rad);

Потом, не забывайте, что изначально ваш угол больше на 1/8 оборота, поэтому из полученного угла надо вычесть PI/4.

Сделал по-своему пример.

Хотел было добавить transition: transform 0.08 для плавности, но появляется проблема перескок при пересечении нуля. Когда угол вдруг меняется с минус-Пи на плюс-Пи, глупый transition проводит крутилку через полный оборот.

Comments

[Егор Шустров]

Большое спасибо, очень помогли.
И пасхалочки тоже нашел, ;)))

this.centerX = rect.x + Math.round(rect.width / 2);
this.centerY = rect.y+ Math.round(rect.height / 2);

и только мы с вами знаем что там нужно поменять чтобы работало ;)

[Павел Корнилов]

Делал такую реализацию: - https://js-master.ru/?Javascripts___Бесплатные_скр...

[Сергей Соколов]

Егор Шустров, эмм..я писал наскоро, и в Firefox работает прямотак. Не намеревался подкладывать сюрпризы. Напишите, в чем там дело?

[Егор Шустров]

Сергей Соколов, все хорошо не переживайте :)

[Егор Шустров]

KorniloFF, спасибо. тоже очень интересно!