根据鼠标位置指向圆圈

Question

我需要做的是创建一个函数，该函数将用鼠标在HTML5画布上绘制线条，并在圆周上对它们进行X次镜像。我提出的是下面的功能。它工作得很好。它做我需要的一切。除了它以与鼠标相反的方向旋转。

void mirroring(x1,y1,x2,y2){

  var mirrorNumber = 6;

  for(var i = 1; i < mirrorNumber;i++){
    var distance1 = dist(x1,y1,window.innerWidth/2, window.innerHeight/2);
    var distance2 = dist(x2,y2,window.innerWidth/2, window.innerHeight/2);

    var deltaY1 = y1-window.innerHeight/2;
    var deltaX1 = x1-window.innerWidth/2;

    var deltaY2 = y2-window.innerHeight/2;
    var deltaX2 = x2-window.innerWidth/2;

    var angle1 = atan2(deltaY1, deltaX1);
    var angle2 = atan2(deltaY2, deltaX2);

    var newX1 = window.innerWidth/2 + distance1 * sin(angle1-(TWO_PI/mirrorNumber)*i);
    var newY1 = window.innerHeight/2 + distance1 * cos(angle1-(TWO_PI/mirrorNumber)*i);

    var newX2 = window.innerWidth/2 + distance2 * sin(angle2-(TWO_PI/mirrorNumber)*i);
    var newY2 = window.innerHeight/2 + distance2 * cos(angle2-(TWO_PI/mirrorNumber)*i);

    line(newX1, newY1, newX2, newY2);

  }

};

这就是它产生的东西：

我想它只需要稍微改变但我无法弄明白。如果事情不清楚，请问我任何问题。

感谢。

编辑：

最终代码如何运作。

void mirroring（x1，y1，x2，y2）{

var mirrorNumber = 6;
var deltaAngle = TWO_PI / mirrorNumber;

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

var distance1 = dist(x1,y1,centerX, centerY);
var distance2 = dist(x2,y2,centerX, centerY);

var deltaY1 = y1-centerY;
var deltaX1 = x1-centerX;

var deltaY2 = y2-centerY;
var deltaX2 = x2-centerX;

var angle1 = atan2(deltaY1, deltaX1);
var angle2 = atan2(deltaY2, deltaX2);

for(var i = 1; i < mirrorNumber;i++){
    // note use of '+' instead of '-' in calls to sin() and cos()
    var newX1 = window.innerWidth /2 - distance1 * sin(angle1-(TWO_PI/mirrorNumber)*i);
    var newY1 = window.innerHeight/2 + distance1 * cos(angle1-(TWO_PI/mirrorNumber)*i);

    var newX2 = window.innerWidth /2 - distance2 * sin(angle2-(TWO_PI/mirrorNumber)*i);
    var newY2 = window.innerHeight/2 + distance2 * cos(angle2-(TWO_PI/mirrorNumber)*i);

    line(newX1, newY1, newX2, newY2);
}

};

Answer 1

好像你应该只是添加i*TWO_PI/mirrorNumber而不是减去它。此外，您有很多可以移出循环的计算。

void mirroring(x1,y1,x2,y2){

    var mirrorNumber = 6;
    var deltaAngle = TWO_PI / mirrorNumber;

    var centerX = window.innerWidth / 2;
    var centerY = window.innerHeight / 2;

    var distance1 = dist(x1,y1,centerX, centerY);
    var distance2 = dist(x2,y2,centerX, centerY);

    var deltaY1 = y1-centerY;
    var deltaX1 = x1-centerX;

    var deltaY2 = y2-centerY;
    var deltaX2 = x2-centerX;

    var angle1 = atan2(deltaY1, deltaX1);
    var angle2 = atan2(deltaY2, deltaX2);

    for(var i = 1; i < mirrorNumber;i++){
        // note use of '+' instead of '-' in calls to sin() and cos()
        var newX1 = centerX + distance1 * sin(angle1 + i * deltaAngle);
        var newY1 = centerY + distance1 * cos(angle1 + i * deltaAngle);

        var newX2 = centerX + distance2 * sin(angle2 + i * deltaAngle);
        var newY2 = centerY + distance2 * cos(angle2 + i * deltaAngle);

        line(newX1, newY1, newX2, newY2);
    }
};

Answer 2

答案可能已经发布了。但是，根据我使用此trig公式的经验，我不得不从x坐标中减去并添加到y坐标。由于y轴向下而不是向上。如果不过多地研究你的代码，我会建议：

var newX1 = window.innerWidth /2 - distance1 * sin(angle1-(TWO_PI/mirrorNumber)*i);
var newY1 = window.innerHeight/2 + distance1 * cos(angle1-(TWO_PI/mirrorNumber)*i);

和newX2相同。我没有查看代码的angle1-(TWO_PI/mirrorNumber)*i部分。但是改变圆形图（x）的一个坐标的方向会保持它

  

从与鼠标相反的方向前进