我正在尝试在使用Webpack的我的React项目中为PIXI.js加载图像资产。 这是我的整个“菜单”组件类:
import React from 'react';
import styles from './Menu.css';
import backgroundUrl from './background.jpg';
require('pixi.js')
class Menu extends React.Component {
componentDidMount () {
// Get reference to canvas element
this.canvas = this.refs.canvas;
// Load assets
PIXI.loader.add([
{
name: 'background',
url: backgroundUrl
}
]).load(this.init());
}
init () {
// Create background sprite
const background = new PIXI.Sprite(PIXI.loader.resources.background.texture);
// DEBUG: Height and width is always '1'
console.log('Background width: ' + background.width);
console.log('Background height: ' + background.height);
// Setup renderer
this.renderer = PIXI.autoDetectRenderer(background.width, background.height);
this.renderer.autoResize = true;
this.renderer.resize(window.innerWidth, window.innerHeight);
this.canvas.appendChild(this.renderer.view);
// Create stage
this.stage = new PIXI.Container();
// Add background to stage
this.stage.addChild(background)
// Tell the renderer to render the stage
this.renderer.render(this.stage);
}
render () {
return (
<div className={styles.canvas} ref='canvas'></div>
);
}
}
export default Menu;
现在您可以看到,我正在尝试使用loader.add()
函数将图像background.jpg
加载到PIXI中。 就是行不通。 在调试控制台日志中,我可以看到图像的高度和宽度为1。此外,当我查看背景图像的URL时,一切似乎都很好。 有小费吗?
尝试将其切换为此;
〜.load(()=> this.init());〜
@ staff0rd很棒! 但为什么??
load
需要一个函数作为其参数,但是您实际上是在调用init()
从而将其结果(无效)传递给load
。 如果init
没有对this
引用,则可以使用以下代码传递函数;
〜.load(this.init);〜
请注意缺少括号。
现在这已经过时了...我们需要一种方法来加载与webpack捆绑在一起的任何资产
@hayesmaker,它可以工作,但纹理
@nitwhiz就是为什么我最初为所有子
加载精灵后,是否有办法触发回调?
最有用的评论
现在这已经过时了...我们需要一种方法来加载与webpack捆绑在一起的任何资产