使用坐标以编程方式旋转形状 [英] Programmatically rotate shapes using coordinates

问题描述

如果我使用坐标数组定义了某些形状，例如

If I have some shapes defined using arrays of coordinates e.g.

[[-30, -30], [-30, 30], [30, 30], [30, -30]]

和使用：

[[0,1],[0,3],[1,2],[2,3]]

做一个正方形。

如何我以编程方式告诉形状在中心旋转*相对于javascript中0-> 359的角度吗？

How do I programmatically tell the shape to rotate *at the center against an angle of 0->359 in javascript?

*或者更好的是，有没有一个函数允许我选择旋转中心？

*Or better yet, is there a function which allows me to choose the center of rotation?

**
目前，我已经设法使用：

** Currently, I've managed to get the shape to circle the canvas using :

var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);

// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0 

推荐答案

在这里，旋转点 x，y 围绕点 centerx，centery 围绕 degrees 度。返回浮点值，如果需要，则取整。

Here you go, rotates point x, y around point centerx, centery by degrees degrees. Returns floating values, round if you need to.

要旋转形状，请旋转所有点。

To rotate a shape, rotate all the points. Calculate the center if you need to, this does not do it.

Desmos链接，其中 x 为 a ， y 为 b ， centerx 为 p ， centery 作为 q ，学位作为 s

Desmos link with x as a, y as b, centerx as p, centery as q, and degrees as s

function rotatePoint(x, y, centerx, centery, degrees) {
    var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * math.PI / 180) + centerx;
    var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * math.PI / 180) + centery;
    return [newx, newy];
}

这篇关于使用坐标以编程方式旋转形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！