Question

我想在我的Vue v2页面内使用PIXI v5 渲染一个简单的JPG（仅供参考）。没有渲染精灵（很可能也没有渲染PIXI.Container）。不过，我可以在Network中看到该图像已加载完毕。

我将pixi.js应用程序实例附加在created（）挂钩中的$ ref上。我使用PIXI.Loader加载图像-仍然没有出现在屏幕上：只有PIXI.Application初始化提供了一些背景颜色。

这是我初始化pixi应用程序实例的方式：

created() {
  this.$nextTick(() => {
    const { pixi } = this.$refs;
    PixiSceneRenderer(pixi);
  });
},

这是导出的函数：

export default function PixiSceneRenderer(element) {
  const app = new PIXI.Application({
    // setting like width, height etc
  });

  const { renderer, stage, loader } = app;

  // Appending view to DOM elem
  element.appendChild(app.view);

  const container = new PIXI.Container();
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;
  stage.addChild(container);

  loader.add('image', require('path to my image'));
  loader.load();
  loader.onComplete.add(onAssetsLoaded);

  resize();
  window.onresize = function(event) {
    resize();
  }

  function resize() {
    let w;
    let h;
    if (window.innerWidth / window.innerHeight >= ratio) {
      w = window.innerHeight * ratio;
      h = window.innerHeight;
    } else {
      w = window.innerWidth;
      h = window.innerWidth / ratio;
    }
    renderer.view.style.width = w + 'px';
    renderer.view.style.height = h + 'px';
  }

  function onAssetsLoaded () { 
    createElements();
    update();
  }

  function createElements () {
    const texture = loader.resources['image'].texture;
    const sprite = new PIXI.Sprite.from(texture);

    // setting up sprite x and y coords, height, width etc

    container.addChild(sprite);
  }

  function update () {
    renderer.render(stage);
    requestAnimationFrame(update);
  }
}

PIXI不会呈现没有错误的精灵

0 个答案: