1

我需要做的是创建一个函数，它将您用鼠标在 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);

  }

};

这是它产生的：

在此处输入图像描述

我想它只需要稍作改动，但我无法弄清楚。如果有什么不清楚的地方，可以问我任何问题。

谢谢。

编辑：

最终代码按预期工作。

无效镜像（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);
}

};

4

2 回答 2

1

Seems like you should simply be adding i*TWO_PI/mirrorNumber instead of subtracting it. Also, you have a lot of calculations that can be moved out of the loop.

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);
    }
};
于 2013-06-30T16:39:16.200 回答
1

答案可能已经发布。但是，根据我使用此三角公式的经验，我必须从 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）坐标之一的方向会保持它

从与鼠标相反的方向

于 2013-06-30T16:56:47.057 回答