矩形 svg图像 围绕某个点旋转后 计算旋转后的四个顶点坐标
时间: 2024-05-03 10:18:58 浏览: 141
假设矩形的中心点坐标为 (cx, cy),长为 w,宽为 h,旋转角度为 angle,那么旋转后四个顶点的坐标可以通过以下公式计算:
```
// 将角度转换为弧度
const radians = angle * Math.PI / 180;
// 计算矩形四个顶点相对于中心点的偏移量
const x1 = -w / 2;
const y1 = -h / 2;
const x2 = w / 2;
const y2 = -h / 2;
const x3 = w / 2;
const y3 = h / 2;
const x4 = -w / 2;
const y4 = h / 2;
// 计算旋转后的四个顶点坐标
const cos = Math.cos(radians);
const sin = Math.sin(radians);
const x1r = cx + x1 * cos - y1 * sin;
const y1r = cy + x1 * sin + y1 * cos;
const x2r = cx + x2 * cos - y2 * sin;
const y2r = cy + x2 * sin + y2 * cos;
const x3r = cx + x3 * cos - y3 * sin;
const y3r = cy + x3 * sin + y3 * cos;
const x4r = cx + x4 * cos - y4 * sin;
const y4r = cy + x4 * sin + y4 * cos;
```
其中 x1, y1, x2, y2, x3, y3, x4, y4 分别为矩形四个顶点相对于中心点的偏移量,x1r, y1r, x2r, y2r, x3r, y3r, x4r, y4r 分别为旋转后的四个顶点的坐标。注意,在计算旋转后的坐标时,需要先将角度转换为弧度,并使用 Math.cos 和 Math.sin 函数计算旋转后的 x 和 y 坐标。
阅读全文