矩形的折点不以原点为中心

问题描述

| 我想这只是使这个问题复杂化了，但是我有一个矩形，正尝试使用旋转值绘制。我具有所有四个顶点的坐标，并且在顺时针旋转X度时需要新的坐标。 编辑：需要注意的一件事，我在HTML5画布上绘图，因此坐标系有些不同。 X和Y始终> 0，并且Y的增加向下进行。 有任何想法吗？ 谢谢     

解决方法

因此，您真正需要的是一个带有点，原点（在这种情况下为矩形的中心）和角度的函数：

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;
};

因此，如果您想使顶点围绕中心（例如）20,20以10,10旋转45度，则可以这样做：

rotatePoint({x:10,y:10},{x:20,y:20},45)

会给您

(20,5.85)

，依此类推。