Как вращать объект холста HTML вокруг неподвижной точки, используя действие мыши?

Question

Например, его можно использовать в приложении для ручной настройки стрелок часов. Я предполагаю, что это, вероятно, включает в себя перевод иглы (чтобы конечная точка иглы стала центром вращения), затем ее вращение, а затем перевод иглы снова.

Но так как стрелка все время слушает событие мыши, будет зафиксировано первое событие мыши. В результате игла переводится и вообще не вращается. Событие мыши тоже невозможно отладить ...

Есть идеи или фрагменты кода, на которые я могу сослаться? Использование Javascript или CSS для поворота обоих отлично.

Answer 1

В вашем примере вы хотите вычислить угол между центром циферблата (черная точка) и текущей позицией мыши (красная точка) относительно оси Y (кардинальный север, если вы представляете компас) .

Если я правильно помню свой триг, вы можете рассчитать это с помощью следующего:

var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }

В формуле x и y - координаты двух точек, одну из которых вы будете знать (это центр циферблата), а другую - из события перемещения мыши.

Получив угол, вы можете просто перевести его в центр круга, повернуть холст на вычисленную величину и нарисовать руку.

Обновление: Я создал jsfiddle для иллюстрации расчета угла:

http://jsfiddle.net/DAEpy/1/