Проверьте, правильно ли расположены стрелки аналоговых часов. - PullRequest
Новая
       24

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

0 голосов
/ 02 марта 2011

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

javascript clock

Проблема в том, что пользователи могут свободно нажимать на любую точку на часах и поэтому могут выбрать неправильное положение стрелок. Есть ли способ (алгоритм) обнаружить это? 

window.addEvent('domready', function()
{
  var handLong = [10, 20, 30, 40, 50, 60, 70, 80];
  var handShort = [10, 20, 30, 40, 50];

  injectHands('clock', handShort, handLong);

  $('clock').addEvent('click', function(e)
  {
    var x = correctX(e.page.x - e.target.getPosition().x, true);
    var y = correctY(e.page.y - e.target.getPosition().y, true);

    var angle = calculateAngle(x, y);

    // grote wijzer positioneren
    if (insideOuter(x, y))
    {
      moveHand(handLong, 'Long', angle);
    }
    // kleine wijzer positioneren
    else if (insideInner(x, y))
    {
      moveHand(handShort, 'Short', angle);
    }
  });
});

// Valt punt (x, y) binnen een cirkel met middenpunt (x, y) en radius r
function insideCircle(pointX, pointY, circleX, circleY, radius)
{
  dX = pointX - circleX;
  dY = pointY - circleY;

  return ((dX * dX) + (dY * dY)) <= (radius * radius);
}

// Valt punt (x, y) (enkel) binnen de buitenste cirkel (grote wijzer)
function insideOuter(pointX, pointY)
{
  return !insideInner(pointX, pointY) && insideCircle(pointX, pointY, 0, 0, 100);
}

// Valt punt (x, y) (enkel) binnen de binnenste cirkel (grote wijzer)
function insideInner(pointX, pointY)
{
  return insideCircle(pointX, pointY, 0, 0, 50);
}

// corrigeer x as (100 => 0) (0 => 100)
function correctX(x, nn)
{
  if (nn)
  {
    return x - 100;
  }
  return x + 100;
}

// corrigeer y as (100 => 0) (0 => 100)
function correctY(y, nn)
{
  if (nn)
  {
    return -y + 100;
  }
  return Math.abs(y - 100);
}

function calculateAngle(x, y)
{
  if ((x >= 0) && (y >= 0))
  {
    return Math.atan(x / y) * (180 / Math.PI);
  }
  else if (((x >= 0) && (y < 0)) || ((x < 0) && (y < 0)))
  {
    return 180 + Math.atan(x / y) * (180 / Math.PI);
  }
  else if ((x < 0) && (y >= 0))
  {
    return 360 - Math.abs(Math.atan(x / y) * (180/ Math.PI));
  }
}

function roundAngleByMinute(angle)
{
}

function calculateX(angle, hypotenuse)
{
  return Math.sin((Math.PI / 180) * angle) * hypotenuse;
}

function calculateY(angle, hypotenuse)
{
  return Math.cos((Math.PI / 180) * angle) * hypotenuse;
}

function injectHands(div, handShort, handLong)
{
  for (var i = 0; i < handShort.length; i++)
  {
    $(div).grab(new Element('img', {src: 'images/red_8x8.png', class: 'hands handShort', id: 'handShort-' + handShort[i]}));
  }
  for (var i = 0; i < handLong.length; i++)
  {
    $(div).grab(new Element('img', {src: 'images/blue_8x8.png', class: 'hands handLong', id: 'handLong-' + handLong[i]}));
  }

  $(div).grab(new Element('img', {src: 'images/black_8x8.png', class: 'hands', id: 'hand-center'}));

  $$('img.hands').hide();
  $('hand-center').show();
}

function moveHand(hand, whichHand, angle)
{
  for (var i = 0; i < hand.length; i++)
  {
    var hypotenuse = hand[i];
    var x = calculateX(angle, hypotenuse) - 5;
    var y = calculateY(angle, hypotenuse) + 5;
    var left = correctX(x);
    var top = correctY(y);

    $('hand' + whichHand + '-' + hypotenuse).set('styles', {'left': left + 'px', 'top': top + 'px'});
  }
  $$('img.hand' + whichHand).show();
}

Ответы [ 2 ]

3 голосов
/ 02 марта 2011

Когда вы устанавливаете часовую стрелку, вы можете определить минутную стрелку.тригонометрия на помощь!При установке минутной стрелки переведите минутную стрелку вперед в выбранное положение и соответственно отрегулируйте часовую стрелку.

Минутная стрелка показывает функцию угла часовой стрелки, так же, как работает оператор по модулю ...

Работает и наоборот: с учетом угла минутной стрелки возможны только двенадцать углов часовой стрелки.Просто выберите ближайший к текущему углу часовой стрелки ...

0 голосов
/ 02 марта 2011

Просто округлите положение часовой стрелки до ближайшего часа и добавьте соответствующее смещение для текущей позиции минутной стрелки?

...