javascript - 根据鼠标位置在圆上的点

Question

我需要做的是创建一个函数，该函数将采用您在 HTML5 Canvas 上用鼠标绘制的线条，并将它们围绕圆圈进行 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);

  }

};

这是它产生的结果:

我想它只需要稍微改变一下，但我想不出来。如果有什么不清楚的地方，尽管问我任何问题。

谢谢。

编辑:

按预期工作的最终代码。

无效镜像(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

答案可能已经发布。但是，根据我使用这个三 Angular 公式的经验，我不得不从 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) 坐标之一的方向会保持它

from going in the opposite direction than the mouse