Question

我想创建一个类Pixel，用于存储给定像素的位置和颜色。

到目前为止，这是我的代码：

<canvas id="kartina" width="500" height="500"></canvas>
<input type="text" id="textField" size="80">

<script>
//pass in coordinates and Canvas context
function Pixel(x,y,ctx){

    //assign coordinate properties
    this.x=x;
    this.y=y;

    //get an array with the color data for the pixel
    this.pixelData=function(){
        return ctx.getImageData(x,y,1,1).data;
    };

    //assign color properties
    this.r=this.pixelData[0];
    this.g=this.pixelData[1];
    this.b=this.pixelData[2];

    //define toString method
    this.toString=function(){
                    var pixelToString=  "x: "+this.x+
                                        ", y: "+this.y+
                                        ", R: "+this.r+
                                        ", G: "+this.g+
                                        ", B: "+this.b;
                    return pixelToString;
    };
}

//test the class
var canvas=document.getElementById("kartina");
var ctx=canvas.getContext("2d");
var pixel=new Pixel(100,100,ctx);
textField.value=pixel.toString();
</script>

toString()的输出是：

x: 100, y: 100, R: undefined, G: undefined, B: undefined

所以我知道正确分配了坐标属性，但pixelData构造实例时没有执行new Pixel()初始化函数。我希望对象的构造函数调用这个初始化函数;我认为这是做到这一点的方法。如何在此处设置构造函数？

Answer 1

由于pixelData是功能，您需要调用来获得所需的结果：

//assign color properties
this.r=this.pixelData()[0];
this.g=this.pixelData()[1];
this.b=this.pixelData()[2];

或者更好：

var pData = this.pixelData();

this.r=pData[0];
this.g=pData[1];
this.b=pData[2];

Answer 2

您正在引用this.pixelData（）函数，就好像它是一个使用[]方括号的数组。

该函数永远不会被调用，因为您将其视为一个数组，而不是调用该函数，然后将结果视为一个数组。

改变这个：

this.r=this.pixelData[0];
this.g=this.pixelData[1];
this.b=this.pixelData[2];

对此：

this.r=this.pixelData()[0];
this.g=this.pixelData()[1];
this.b=this.pixelData()[2];

或者避免三次打电话：

//assign color properties
var pixelData = this.pixelData()
this.r = pixelData[0];
this.g = pixelData[1];
this.b = pixelData[2];

类中的构造方法未被调用

2 个答案: