feat: 二维渲染Demo

uavps-web/src/router/index.js

@@ -64,13 +64,13 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: 'Demo',
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        path: 'demo',
+        component: () => import('@/views/demo/index'),
+        name: 'Demo',
+        meta: { title: 'DEMO', icon: 'dashboard', affix: true }
       }
     ]
   },

uavps-web/src/views/demo/index.vue

@@ -0,0 +1,77 @@
+<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>