javascript - 不能将 'PImage' 作为 Processing.js 中的类属性

Question

我想做的是，声明一个类，它有一个图像作为它的属性。然后我声明该类的一个对象并调用绘制函数。但它不起作用....为什么？这是我的 .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 对象在图像加载之后 后才会创建。