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：ddddata(){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=10cat.y=10cat.width=80cat.height=80app.stage.addChild(cat)}} },mounted(){this.init()} 效果图：
transparent: false可以改变画布是否透明
下一章我们将实现如何实现闪烁点功能
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：ddddata(){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=10cat.y=10cat.width=80cat.height=80app.stage.addChild(cat)}} },mounted(){this.init()} 效果图：
transparent: false可以改变画布是否透明
下一章我们将实现如何实现闪烁点功能