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应用并显示一个精灵（一）相关推荐

linux npm安装_怎样在Linux上开发vue项目
怎样在Linux上开发vue项目一.开发环境搭建:安装node.js环境以及vue cli工具 (1)安装node.js 从官网下载对应的二进制压缩包,如下图: 解压到程序安装目录 xz -d no ...
基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
vue如何在末尾添加_怎样在Linux上开发vue项目
一.开发环境搭建:安装node.js环境以及vue cli工具 (1)安装node.js 从官网下载对应的二进制压缩包,如下图: 01.png 解压到程序安装目录 xz -d node-v12.17. ...
Vue、J2ee - 001 ： Vue项目的创建过程
使用命令行的方式,通过vue-cli的脚手架进行模板下载打包: 1.安装node.js环境,查看node版本并确认是否安装成功[node -v] 2.安装WebStorm开发工具(使用WebStorm ...
VsCode工具开发vue项目必装插件
VsCode工具开发vue项目必装插件目录 VsCode工具开发vue项目必装插件 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Sn ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
基于Element，快速开发Vue项目
Element,是一套基于Vue2.0的UI组件库,利用它,我们可以可以快速开发我们的Vue项目. 官网网址:http://element-cn.eleme.io/#/zh-CN 闲话不多说,我们将基 ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...

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

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

最新文章

热门文章