Vue-PixiJS
官网:
背景:
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库
结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带你了解其核心概念和一个示例工程。
Pixi JS 是什么
Pixi.js 提供一个快速轻量级的2D库，它可以跨所有设备工作。
渲染器让每个人都可以享受硬件加速的强大功能，而无需事先了解WebGL。而且，速度很快。真的很快。
核心代码
// var pixi = require('pixi');
import * as PIXI from "pixi.js";
export default {
name: "pixi2",
props: {},
data() {
return {};
},
mounted() {
this.initState();
},
methods: {
initState() {
let app = new PIXI.Application({
width: 800, // default: 800 宽度
height: 600, // default: 600 高度
antialias: true, // default: false 反锯齿
transparent: false, // default: false 透明度
resolution: 1, // default: 1 分辨率
backgroundAlpha: 0, // 设置背景颜色透明度 0是透明
});
app.renderer.backgroundColor = 0x262626; // 设置canvas背景颜色
console.log(app);
// 将创建好的canvas添加到元素当中去
document.getElementById("pixi2").appendChild(app.view);
// TODO 路径暂时写死
let bear = new PIXI.Sprite.from("http://localhost:8080/images/bunny.png");
bear.x = 400;
bear.y = 300;
app.stage.addChild(bear);
app.stage.interactive = true;
// 小熊点击事件
app.stage.on("pointerdown", () => {
bear.scale.x *= 1.25;
bear.scale.y *= 1.25;
});
},
},
};
1.配置步骤
1.1 安装nodejs
1.2 确认npm cnpm
npm install -g cnpm -registry=registry.npm.taobao.org
1.3 安装vue脚手架:
npm install vue-cli -g
1.4 安装pixijs:
npm install pixi.js
2.运行本项目
命令行执行:npm run serve
