無法在Processing.js中將“ PImage”用作類屬性

Question

我試圖做的是，聲明一個具有Image屬性的類，然后聲明該類的Object並調用draw函數。但是它不起作用....為什么？ 這是我的.html頁面中的processing.js部分

  <script type="text/processing"> PImage starImage; void setup(){ size(400,400); smooth(); starImage = loadImage("star.png"); } var Star = function(x,y) { this.x = x; this.y = y; this.img = starImage; }; Star.prototype.drawStar = function(){ image(this.img,this.x,this.y,50,50); }; var obj = new Star(50,50); draw = function(){ obj.drawStar(); }; </script> 

但是如果我更改“ image（this.img，this.x，this.y，50,50）;” 到“ image（starImage，this.x，this.y，50,50）;”，它起作用了。這似乎在this.img中分配了'starImage'（PImage）無效。

Answer 1

我認為您的主要問題是，在加載starImage PImage之前先創建Star對象。 嘗試重構代碼，以確保在創建Star對象之前先加載圖像。

這是在純處理中的處理方式：

PImage starImage;

Star obj;

void setup() {
  size(400, 400);
  smooth();

  starImage = loadImage("star.png");
  obj = new Star(50, 50, starImage);
}

class Star{

  float x;
  float y;
  PImage img;

  public Star(float x, float y, PImage img){
    this.x = x;
    this.y = y;
    this.img = img;
  }

  public void drawStar(){
    image(this.img, this.x, this.y, 50, 50);
  }
}

void draw(){
  obj.drawStar();
}

這也應該在Processing.js中起作用。 請注意，直到加載圖像后才創建Star對象。