在javascript中创建一个旋转函数

Make a rotate function in javascript

本文关键字:一个 旋转 函数 javascript 创建      更新时间:2023-09-26

我正在看这个网站学习如何使自定义旋转功能(只是为了好玩)。我在可汗学院运行我的代码,因为用代码练习自然模拟对我来说很容易。目前我有

// I would like to try and make 3d objects
//used this as a reference http://petercollingridge.appspot.com/3D-tutorial/rotating-objects

//make nodes
var node = function(x,y){
    this.x = x;
    this.y = y;
};
node.prototype.draw = function(){
    fill(0, 0, 0);
    ellipse(this.x,this.y,5,5);
};

//make and edge
var edge = function(n_1,n_2){//this n_1, and n_2 are arbitrary names for input params
    this.n_1 = n_1;
    this.n_2 = n_2;
};
//draw the edge
edge.prototype.draw = function(){
    fill(0, 0, 0);
    line(this.n_1.x,this.n_1.y, this.n_2.x, this.n_2.y);
};

//a center would be much eaiser... I will make squares with centers and diameters instead!
var square = function(x,y,d){
    this.x = x;
    this.y = y;
    this.d = d;
    //the radius
    var r = this.d/2;
    //make the nodes
    var n1 = new node(this.x -r ,this.y +r);
    var n2 = new node(this.x -r ,this.y -r);
    var n3 = new node(this.x +r ,this.y -r);
    var n4 = new node(this.x +r ,this.y +r);

    var nArray = [n1,n2,n3,n4];
    this.nArray = nArray;
    //make the edges
    var e1 = new edge(n1,n2);
    var e2 = new edge(n2,n3);
    var e3 = new edge(n3,n4);
    var e4 = new edge(n4,n1);

    var eArray = [e1,e2,e3,e4];
    this.eArray = eArray;
};


//make new squares
var s1 = new square(125,15,20);
var s2 = new square(185,15,20);

square.prototype.draw = function() {
    //draw everything
    for(var i = 0; i < this.nArray.length; i++){
        this.nArray[i].draw();
    }
    for(var j = 0; j < this.eArray.length; j++){
        this.eArray[j].draw();
    }
};

square.prototype.rotate2D = function(theta){
    //how much we want it to change is theta
    var sin_t = sin(theta);
    var cos_t = cos(theta);
    //we need the original x and y, since this.x and this.y will be changed
    var x = this.nArray[0].x;
    var y = this.nArray[0].y;
    //remember trig? x' = x * cos(beta) - y * sin(beta)
    //               y' = y * cos(beta) - x * sin(beta) 
    this.nArray[0].x = x * cos_t - y * sin_t;
    this.nArray[0].y = (y * cos_t) + (x * sin_t);
    text(x,200,200);
};

    s2.rotate2D(-3);
    s2.draw();
//draw shapes
draw = function() {
    //fill(255, 255, 255);
    //rect(0, 0, width, height);

    s1.draw();
    //s2.rotate2D(3);
    //s2.draw();
};

问题显然在我的

square.prototype.rotate2D

函数。形状应该围绕节点的x和y值旋转,但由于某种原因,它似乎是围绕(0,0)旋转。不知道为什么会这样,我花了几个小时试图弄清楚。任何帮助都是感激的。此外,我觉得我的一般程序结构是坏的,我有一些不必要的代码,所以让我知道,如果有任何优化或更好的结构,我也可以使用。

终于想通了。和enhzflep说的有点接近

for (var n = 0; n < this.nArray.length; n++) {
    var node = this.nArray[n];
    var x = this.nArray[n].x - this.x;
    var y = this.nArray[n].y - this.y;
    node.x = x * cos_t - y * sin_t + this.x;
    node.y = y * cos_t + x * sin_t + this.y;
}