Преобразование вершин для прямоугольника, не центрированного в начале координат

Question

Я думаю, я просто слишком усложняю это, но у меня есть прямоугольник, который я пытаюсь нарисовать, используя значение поворота.У меня есть координаты всех четырех вершин, и мне нужны новые координаты при повороте на X градусов по часовой стрелке.

РЕДАКТИРОВАТЬ: Следует отметить, что я рисую на холсте HTML5, поэтому система координат немного отличается.X и Y всегда> 0, и увеличение Y прогрессирует вниз.

Есть идеи?

Спасибо

Answer 1

Так что все, что вам действительно нужно, это функция, которая берет точку, начало координат (в данном случае центр вашего прямоугольника) и угол:

function rotatePoint(p, origin, angle) {
  if (angle === 0) return p;
  // make the origin essentially zero:
  var px = p.x - origin.x;
  var py = p.y - origin.y;
  if (px == 0 && py == 0) return p;
  var rad = angle * Math.PI / 180;
  var cosine = Math.cos(rad);
  var sine = Math.sin(rad);
  p.x = cosine * px - sine * py;
  p.y = sine * px + cosine * py;
  // put the point back:
  p.x += origin.x;
  p.y += origin.y;
  return p;
};

Итак, если вы хотите повернуть вершину на 10,10 на 45 градусов относительно центра, который (скажем) 20,20, вы должны сделать: rotatePoint({x:10, y:10}, {x:20, y:20}, 45) даст вам (20, 5.85) и т. Д.