javascript - this.image.width / number 产生 0

Question

我正在尝试使用图像宽度来计算精灵的宽度，但数字总是显示为 0，这是为什么呢？

function SpriteSheet(image, numFramesX, numFramesY, totalFrames) {
    this.image = image;
    this.numFramesX = numFramesX;
    this.numFramesY = numFramesY;
    this.totalFrames = totalFrames;

    this.spriteWidth = this.image.width / this.numFramesX;
    this.spriteHeight = this.image.height / this.numFramesY;
}

image.onload = function() {
console.log('Image has been loaded');
}
image.src = 'dance.png';
spritesheet = new SpriteSheet(image, 8, 10, 80);

spritesheet.spriteWidth 和 spritesheet.spriteHeight 总是产生 0。我将问题转向“this.image.width”，因为如果我手动输入图像的宽度，它就可以工作。

this.spriteWidth = 880 / this.numFramesX;

代替

this.spriteWidth = this.image.width / this.numFramesX;

如果我使用控制台中的对象计算它，它也可以工作：

spritesheet.image.width / spritesheet.numFramesX

产量 110

jsfiddle

Answer 1

那个怎么样？

window.onload = function () {
    console.log('Image has been loaded');
    image.src = 'dance.png';
    spritesheet = new SpriteSheet(image, 8, 10, 80);
}