用JavaScript求旋转矢量图形矩形的所有新坐标

// 定义矩形的初始坐标和旋转角度
var rect = {
  x: 100, // 矩形左上角顶点的x坐标
  y: 100, // 矩形左上角顶点的y坐标
  width: 200, // 矩形的宽度
  height: 100, // 矩形的高度
  angle: 45 // 旋转角度（单位为度）
};

// 将旋转角度转换为弧度
var angleInRadians = rect.angle * Math.PI / 180;

// 计算矩形的中心点坐标
var centerX = rect.x + rect.width / 2;
var centerY = rect.y + rect.height / 2;

// 定义旋转矩阵公式
function rotatePoint(x, y, angle) {
  var newX = x * Math.cos(angle) - y * Math.sin(angle);
  var newY = x * Math.sin(angle) + y * Math.cos(angle);
  return { x: newX, y: newY };
}

// 对矩形的每个顶点进行旋转操作
var topLeft = rotatePoint(rect.x - centerX, rect.y - centerY, angleInRadians);
var topRight = rotatePoint(rect.x + rect.width - centerX, rect.y - centerY, angleInRadians);
var bottomLeft = rotatePoint(rect.x - centerX, rect.y + rect.height - centerY, angleInRadians);
var bottomRight = rotatePoint(rect.x + rect.width - centerX, rect.y + rect.height - centerY, angleInRadians);

// 将旋转后的相对坐标加上中心点坐标，得到旋转后的顶点坐标
var rotatedTopLeft = { x: topLeft.x + centerX, y: topLeft.y + centerY };
var rotatedTopRight = { x: topRight.x + centerX, y: topRight.y + centerY };
var rotatedBottomLeft = { x: bottomLeft.x + centerX, y: bottomLeft.y + centerY };
var rotatedBottomRight = { x: bottomRight.x + centerX, y: bottomRight.y + centerY };

// 打印旋转后的所有顶点坐标
console.log("旋转后的顶点坐标：");
console.log(rotatedTopLeft);
console.log(rotatedTopRight);
console.log(rotatedBottomLeft);
console.log(rotatedBottomRight);