Блог

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

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

#html #canvas

#HTML #холст

Вопрос:

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

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

Есть идеи?

Спасибо

Комментарии:

1. При повороте относительно чего именно? При повороте вокруг центра прямоугольника? При повороте вокруг верхнего левого угла прямоугольника?

2. Да, при повороте вокруг центра прямоугольника.

Ответ №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 amp;amp; 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) , и так далее.