可汗学院：无法读取未定义的属性

Question

我正在编写一个可以在可汗学院上转换多边形的库，但是我一直收到此错误：

Cannot read property 'x' of undefined

没有行号。

我的代码：

var Point = function(x,y) {
    this.x = x;
    this.y = y;
};

Point.prototype.rotate = function(around,degrees) {
    angleMode = "degrees";
    var aX = around.x;
    var aY = around.y;
    var cX = this.x;
    var cY = this.y;
    var dist = sqrt(sq(cX-aX)+sq(cY-aY));
    var currentTheta = asin(dist/cY);
    var gamma = degrees+currentTheta;
    this.x = cos(gamma)*dist+aX;
    this.y = sin(gamma)*dist+aY;
};

var Line = function(x1,y1,x2,y2) {
    this.f = new Point(x1,y1);
    this.s = new Point(x2,y2);
};

Line.prototype.draw = function() {
    line(this.f.x,this.f.y,this.s.x,this.s.y);
};

Line.prototype.rotate = function(around,degrees) {
    this.f = this.f.rotate(around,degrees);
    this.s = this.s.rotate(around,degrees);
};

var Polygon = function(x,y){
    if(x.length!==y.length){return;}
    this.sides = x.length;
    this.x = x;
    this.y = y;
    this.lines = new Array(this.sides);
    this.lines[0] = new Line(this.x[this.sides-1],this.y[this.sides-1],this.x[0],this.y[0]);
    for(var i=1;i<this.sides;i++){
        this.lines[i] = new Line(this.x[i-1],this.y[i-1]);
    }
};

Polygon.prototype.draw = function() {
    for(var i=0;i<this.sides;i++){
        this.lines[i].draw();
    }
};

Polygon.prototype.rotate = function(around,degrees) {
    for(var i=0;i<this.sides;i++){
        this.lines[i].rotate(around,degrees);
    }
};

var p = new Polygon([10,20,40],[40,20,15]);

var draw = function() {
    background(255,255,255);
    fill(0,0,0);
    stroke(0,0,0);
    p.rotate(new Point(20,20),1);
    p.draw();
};

但是我仍然不知道为什么它会抛出错误，尤其是因为它没有给出错误所在的方向。

编辑

Link 项目：Transformation Library

Answer 1

让我们从您的 Point class 及其 rotate() 函数开始：

Point.prototype.rotate = function(around,degrees) {
    angleMode = "degrees";
    var aX = around.x;
    var aY = around.y;
    var cX = this.x;
    var cY = this.y;
    var dist = sqrt(sq(cX-aX)+sq(cY-aY));
    var currentTheta = asin(dist/cY);
    var gamma = degrees+currentTheta;
    this.x = cos(gamma)*dist+aX;
    this.y = sin(gamma)*dist+aY;
};

此函数进行一些数学运算并设置 this.x 和 this.y 变量。到目前为止一切顺利（免责声明：我没有检查过这个数学，但这不是重点）。但是请注意，这个函数没有return任何东西。

现在让我们转到您的 Line class 及其 rotate() 函数：

Line.prototype.rotate = function(around,degrees) {  
   this.f = this.f.rotate(around,degrees);
   this.s = this.s.rotate(around,degrees);
};

这会将 f 和 s 变量设置为 return 从 rotate() 函数中编辑的值。但是等等，Point class 中的 rotate() 函数没有 return 任何东西！所以现在 this.f 和 this.s 是 undefined!

您的 Polygon class 调用 Line class 的 rotate() 函数也有类似的问题。

因此，要解决您的问题，您需要 rotate() 函数来 return 某些东西，或者您只需要调用它们而不是期望 return 值。

退一步说，我想知道你为什么要自己做这一切。 Processing 有自己的 rotate() 功能，可以为您完成所有这些工作。为什么不直接使用它们呢？

可汗学院：无法读取未定义的属性

Khan Academy: Cannot read property of undefined

javascript

processing.js

khan-academy

编辑

可汗学院：无法读取未定义的 属性

Khan Academy: Cannot read property of undefined

javascript

processing.js

khan-academy

编辑

可汗学院：无法读取未定义的属性