javascript - 在 Canvas 上用旋转矩阵旋转等边三 Angular 形

Question

所以我很确定我在数学上的某个地方进行了大量的研究，因为它在纸上进行了检查......但是......我的三 Angular 形正在从页面上旋转哈哈。我想做的是永远逆时针旋转一个等边三 Angular 形，其中原点(三 Angular 形的中心，即三条线，从每个顶点到中间各一条，它们相遇的地方就是我定义三 Angular 形中心的方式)不动。这是我的数学摘要，以防此处出现错误:

v1(x1,y1)、v2(x2,y2) 和 v3(x3.y3) 表示三 Angular 形中的顶点。首先我计算三 Angular 形的中心:x=(x1+x2+x3)/3，y=(y1+y2+y3)/3。接下来，我通过从每个顶点减去中心值来创建三个新顶点。然后，我将每个新顶点乘以 30 度的旋转矩阵，并将中心添加到新的旋转顶点。

我尽力阅读本文并确保它有意义。

这是我的代码:

function calcVerts() {
    var xOrig = (x1 + x2 + x3)/3;
    var yOrig = (y1 + y2 + y3)/3;
    
    x1 -= xOrig;
    x2 -= xOrig;
    x3 -= xOrig;
    y1 -= yOrig;
    y2 -= yOrig;
    y3 -= yOrig; 

    x1 = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1);
    y1 = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1);
    x2 = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2);
    y2 = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2);
    x3 = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3);
    y3 = (x4 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);
    
    x1 += xOrig;
    x2 += xOrig;
    x3 += xOrig;
    y1 += yOrig;
    y2 += yOrig;
    y3 += yOrig; 
}
function drawScreen() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); //clear canvas before each repaint
    
    // the triangle
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.lineTo(x3, y3);
    context.closePath();
    base++;
    // the outline
    context.lineWidth = 10;
    context.strokeStyle = '#666666';
    context.stroke();
    
    calcVerts();
}

theCanvas = document.getElementById("myCanvas");
context = theCanvas.getContext("2d");
var speed = 5;
var base = 400;
var height = 346.4;
var x1 = base-200;
var x2 = base-400;
var x3 = base;
var y1 = height-346.4;
var y2 = height;
var y3 = height;

function drawLoop() {
    window.setTimeout(drawLoop, 500);
    drawScreen();
}
drawLoop();

<div align="center">
    <canvas id="myCanvas" width="500" height="500"></canvas>
</div>

编辑1:感谢杰森发现了拼写错误，我不再旋转页面，而是三 Angular 形在每次旋转时缩小。编辑:y3 = (x4 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);至y3 = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

Answer 1

它们工作得很好，但你忽略了一点。 (和 x4)。

   x1 = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1);
   y1 = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1);
   x2 = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2);
   y2 = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2);
   x3 = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3);
   y3 = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

您更新了x1、x2、x3的值，但之后再次使用它。

您必须使用相同的缓冲区，减少数学运算并更新值，例如:

var x1_ = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1),
    y1_ = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1),
    x2_ = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2),
    y2_ = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2),
    x3_ = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3),
    y3_ = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

x1 = x1_;
x2 = x2_;
x3 = x3_;
y1 = y1_;
y2 = y2_;
y3 = y3_;