不工作 'PImage' 作为 Class 属性 在 Processing.js

Question

我想做的是，声明一个 class，它有一个图像 property.Then 我正在声明一个 class 的对象并调用 draw function.But 它不工作....为什么？这是我的 .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);"，works.That 似乎 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 对象直到 在 图像加载后才被创建。