如何绕中心旋转三角形？答案

【问题标题】：How to rotate a triangle about its center?如何绕中心旋转三角形？
【发布时间】：2023-01-08 03:12:33
【问题描述】：

    document.onkeydown = function (event) {
        switch (event.keyCode) {
            case 74:
                //player presses "j"
                px = player.calculateCentreX();
                py = player.calculateCentreY();
                x1 = rotateX(player.x1,player.y1,35,px,py);
                x2 = rotateX(player.x2,player.y2,35,px,py);
                x3 = rotateX(player.x3,player.y3,35,px,py);
                y1 = rotateY(player.x1,player.y1,35,px,py);
                y2 = rotateY(player.x2,player.y2,35,px,py);
                y3 = rotateY(player.x3,player.y3,35,px,py);
                
                player.setPoints(x1,y1,x2,y2,x3,y3);
                break;
                
            default:
                break;
        }
    };
    
    function rotateX(cx,cy,angle,px,py) {
        x = Math.cos(angle)*(px-cx) - Math.sin(angle)*(py-cy) + cx
        return x
        }
        
    function rotateY(cx,cy,angle,px,py) {
        y = Math.sin(angle)*(px-cx) + Math.cos(angle)*(py-cy) + cy
        return y
        }

每当用户按下“J”时，我正在使用上面的方法尝试围绕它的中心旋转一个三角形（播放器）。 setPoints 方法只是将三角形 x1、y1、x2、y2、x3、y3 值设置为更新后的点。每当用户按下 J 时，三角形都会旋转但会变大 - 有人可以指出这里有什么问题吗？

【问题讨论】：

标签： javascript math geometry angle

【解决方案1】：

似乎您使用了错误的参数顺序：函数是用center, angle, point序列定义的

cx,cy, angle, px,py
  ^             ^
center        point

但是你用point, angle, center序列调用它

px = player.calculateCentreX();
py = player.calculateCentreY();
x1 = rotateX(player.x1,player.y1,  35,  px,py); !!!!!
                     ^                   ^           
                   point                center calculated above

结果，前一个中心围绕顶点旋转

【讨论】：