<template>
  <div id="app">
    <!-- <div id="pixi" style="z-index:-1;">  </div> -->
    <div ref="pixiContainer" class="pixi-container" style="z-index:-1;"></div>
  </div>
</template>

<script>
import air from '@/views/textures/air.png'
import * as PIXI from 'pixi.js'
export default {
  data(){
    return{
      pixiContainer: null,
      pixiApp: null,

    };
  },
  components: {
  },
  methods: {
    initPixi() {
      this.pixiContainer = this.$refs.pixiContainer;
      // 创建Pixi应用
      this.pixiApp = new PIXI.Application({
        width: this.pixiContainer.clientWidth,
        height: this.pixiContainer.clientHeight,
        antialias: true,
        transparent: false,
        resolution: 1,
        backgroundAlpha: 0,
      });
      this.pixiApp.renderer.backgroundColor = 0x66ccff;
      this.pixiContainer.appendChild(this.pixiApp.view);

      // let app = new PIXI.Application({ width:800,height:600,backgroundColor: 0xEF6644 });
      // document.getElementById("pixi").appendChild(app.view);

      let container = new PIXI.Container();
      container.x = this.pixiApp.screen.width / 2;
      container.y = this.pixiApp.screen.height / 2;
      this.pixiApp.stage.addChild(container)//容器加入舞台

      for(let i=0;i<25;i++){
          let bunny = PIXI.Sprite.from(air);
          bunny.width=40;
          bunny.height=40;
          bunny.anchor.set(0.5);
          bunny.x=(i%5)*40;
          bunny.y=Math.floor(i/5)*40;
          container.addChild(bunny)
      }

      container.pivot.x = container.width / 2;
      container.pivot.y = container.height / 2;
      this.pixiApp.ticker.add(function(delta) {
      });
    }
  },
  mounted: function() {
     this.initPixi();
  },
}
</script>
<style scoped>
.pixi-container {
  width: 100%;
  /* height: 750px; */
  height: calc(100vh - 140px);
  position: relative;
}

.pixi-container canvas {
  width: 100%;
  height: 100%;
}
</style>
