Почему необходимо добавить 270 градусов для правильного вращения? - PullRequest
Новая
       65

Почему необходимо добавить 270 градусов для правильного вращения?

0 голосов
/ 13 февраля 2019

Вычисление угла между двумя точками кажется несовместимым с поворотом DOM

Я написал код для вычисления угла между двумя точками.Я использую холст HTML, чтобы построить линию между точками, а также отображаю элемент DOM с символом стрелки, который я поворачиваю, чтобы указать направление вектора.Мне неясно, почему необходимо добавить 270 градусов, чтобы исправить положение стрелки.

См. Эту строку ниже: radians += (3 * Math.PI / 2); // why 270 degrees?

class Vector {
  constructor(x=0, y=0) {
    this.x = x;
    this.y = y;
  }  
  angleFromVectors(anchor, point) {
    return Math.atan2(anchor.y - point.y, anchor.x - point.x);
  }  
  draw(v1, v2) {
    let canvas = document.getElementById('canvas');
    if (canvas.getContext) {
      let ctx = canvas.getContext('2d');      
      ctx.moveTo(v1.x, v1.y);
      ctx.lineTo(v2.x, v2.y)
      ctx.stroke();      
    }
  }
  rotateArrow(degrees) {
    let arrow = document.getElementById('arrow');
    arrow.style.webkitTransform = 'rotate('+ degrees + 'deg)'; 
  }
}

let v1 = new Vector(180, 180);
let v2 = new Vector(100, 190);
let vector = new Vector();

let radians = vector.angleFromVectors(v1, v2);
radians += (3 * Math.PI / 2); // why 270 degrees?
let degrees = radians * (180 / Math.PI);

console.log(`radians: ${radians}, degrees: ${degrees}`);
vector.draw(v1, v2);
vector.rotateArrow(degrees);

Кодовый код здесь: https://codepen.io/cjus/pen/bzKvwO

1 Ответ

0 голосов
/ 13 февраля 2019

Стрелкой является символ ⬆.Поскольку он направлен вверх, если вы хотите, чтобы он указывал влево, вам нужно повернуть его.Вы также можете повернуть его -90deg.

Кстати, как вы на самом деле вращаете его 262.875deg.

...