системы координат полярная

  background-image: url('./images/indicator.png');

  position: absolute;

  background-image: url('./images/rheostat.png');

  position: relative;

    <div id="Indicator"></div>

  <div id="Container">

Из математики это, пожалуй, все. Теперь займемся кодингом. В HTML все предельно просто:

v = arctg(tg(v)) = arctg(y / x)

Угол v отсюда находим как арктангенс:

Катетами в этом треугольнике будут координаты курсора. Отсюда мы можем найти тангенс угла v как отношение противолежащего катета к прилежащему:

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

Кооринаты x и y мы подставим в CSS-свойства left и top индикатора. Стоит отметить, что на схеме ось y направлена снизу вверх. В браузере же у нее противоположное направление. Это мы учтем, когда будем менять координаты индикатора.

Жаль, что визуализировать точку в такой системе координат браузеру не под силу он работает с декартовой системой. Но это не проблема, т.к. мы можем легко перейти из полярной системы в декартову используя формулы:

Итак, полярная система координат определяет положение точки по двум величинам: угол поворота радиус-вектора относительно полярной оси v и длина радиус-вектора r. Для лучшего понимания взгляните на схему ниже.

Идея в том, чтобы поместить индикатор на подложку и вращать его в соответствии с положением курсора мыши. Для вычисления положения индикатора нам пригодится математика. Не бойтесь, волновое уравнение решать нам не прийдется, вспомим немного школьной тригонометрии и полярную систему координат.

Так как с помощью JavaScript нельзя вращать изображения, то мы поступим не так как поступили бы во флеше. Для реализации задачи нам понадобятся два изображения:

Этим топиком я продолжаю цикл статей о написании всяких вкусностей для MooTools. Сегодня мы на чистом JavaScript сделаем вращательный регулятор контрол, который часто используют в работающих со звуком программах для регулировки громкости или баланса. Вот примерно такой:

Делаем вращательный регулятор.

10 октября 2008 в 16:56

Делаем вращательный регулятор. / Хабрахабр