Graphics BitMapFill TypeError

问题:

I'm working with the easeljs javascript to make a sort of game. I'm using this example: http://www.createjs.com/#!/EaselJS/demos/game

As you can see there are spacerocks. This are graphics objects:

this.graphics.beginStroke("#FFFFFF");

I would like to fill the background with an image like this:

var bitmap = new createjs.Bitmap("http://nielsvroman.be/twitter/root/easeljs/image.png");
this.graphics.beginBitmapFill(bitmap, "no-repeat"); 

But I always get this error:

Uncaught TypeError: Type error

Does anybody know what I'm doing wrong?

回答1:

Use a reference to an HTML Image, and not a Bitmap instance.

var image = new Image();
image.srce = "http://nielsvroman.be/twitter/root/easeljs/image.png";
this.graphics.beginBitmapFill(image, "no-repeat"); 

Note that you have to ensure the image is loaded, otherwise it may not show up on the first stage update. You can either tick the stage, or listen for image onload, and refresh the stage then.

image.onload = function() {
    stage.update();
}