旋转公式使多边形变形

时间:2014-06-04 18:36:09

标签: javascript html5 rotation geometry trigonometry

我自己写了一个公式来围绕一个定向点旋转正多边形的点(甚至可能是不规则的)。该公式似乎适用于离散编码的矩形:

tempShape.points = [[0,0],[wid,0],[wid,hig],[0,hig]];

但不是由公式生成的多边形:

tempShape.points = [[len,0]];
for(var i=1; i < poin; i++){
    if(gen){
        tempShape.points[i] = [0,0];
        tempShape.points[i][0] = len*Math.cos(angle*i);
        tempShape.points[i][1] = len*Math.sin(angle*i);
    }
}

这是我的轮换公式:

    for(var i2 = 0; i2 < displayList[i].points.length; i2++){
        displayList[i].points[i2][0] = (displayList[i].pointsRot[i2][0] + displayList[i].oPoint[0]) * Math.cos(displayList[i].rotation) - (displayList[i].pointsRot[i2][1] + displayList[i].oPoint[1]) * Math.sin(displayList[i].rotation);
        displayList[i].points[i2][1] = (displayList[i].pointsRot[i2][1] + displayList[i].oPoint[1]) * Math.cos(displayList[i].rotation) + (displayList[i].pointsRot[i2][0] + displayList[i].oPoint[0]) * Math.sin(displayList[i].rotation);
    }

其中displayList [i]是形状,。points是包含所有点的数组,.rotation是形状的旋转,.oPoint是方向点。 我希望你能提前帮助,谢谢。 凯尔。

编辑: 刚尝试而不是递增旋转我设置了0.01的静态旋转,但这使得它的行为就像通常将旋转增加0.01一样,所以某处(我不知道在哪里)它必须像增加我的旋转一样设置旋转,我只需要搞清楚。我可以给我的整个代码供别人看一下来帮助我吗?

1 个答案:

答案 0 :(得分:1)

您正在使用第二个公式值displayList[i].pointsRot[i2][0],该值已在第一个公式中更改过。只需记住临时变量中的原始值并使用它。

编辑:好像我被你长长的名字所纠缠。 С检查您的公式是否匹配:

  NewX = CenterX + (OldX-CenterX)*Cos(Fi) - (OldY-CenterY)*Sin(Fi)
  NewY = CenterY + (OldX-CenterX)*Sin(Fi) + (OldY-CenterY)*Cos(Fi)

其中(CenterX,CenterY)是旋转点