WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵（一）

Pixi中文网：Pixi.js中文网

使用vue-cli初始化一个vue项目我就不多说了，在我的这边文章里已经写过：

从零开始vue项目使用cesium开发三维地图（一）_yinzisang的博客-CSDN博客

创建完成后我们安装pixi插件：

npm install --save vue-pixi@5.1.2

安装成功后page.json里面查看：

 新建一个PixiDemo.vue文件，后续我们都是通过这个Demo来操作pixi

PixiDemo初始化：

<template>
   <div id="pixi"></div>
</template>
<script>

import * as PIXI from 'pixi.js'
export default{
  name：ddd
  data(){
      return{

       }
    }
}
</script>

第一步是使用Pixi上的Application对象创建一个矩形显示区域。 它会自动生成一个HTML <canvas>元素，然后在canvas画布上显示图像。 之后，您需要创建一个称为stage（舞台）的特殊Pixi容器对象。 

注意:这里踩坑了一开始我我引用vue项目中src目录下的logo.png,却怎么都不显示，后来发现引入方式不对，这里看了两篇博客才解决

Vue 中加载图片 public 和 src/assets 文件夹下的区别（采坑）_前端技术-CSDN博客

相对路径./与../区别_RocksLee-CSDN博客_相对路径

上代码:

 methods:{
          init(){
              let app = new PIXI.Application({ 
              width: 500, 
              height: 500,                       
              antialias: true, 
              transparent: true, 
              resolution: 1,
              });  
              app.stage.alpha=0.5  
              let url = require('../../assets/cat.png')
                document.getElementById("pixi").appendChild(app.view);
                app.loader
                .add(url)
                .load(setup)
                function setup(){
                    let cat=new PIXI.Sprite(app.loader.resources[url].texture)
                    cat.x=10
                    cat.y=10
                    cat.width=80
                    cat.height=80
                    app.stage.addChild(cat)
                }
            }  
         },
   mounted(){
        this.init()
    }       

效果图：

 transparent: false可以改变画布是否透明

下一章我们将实现如何实现闪烁点功能