由于项目需要接触到PIXI这个框架,故开始了一顿打头操作
由于目前PIXI的文档还是很少,而且大多数是英文文档这里提供几个PIXI的demo和文档
demo: http://47.99.120.179/pixi/v4/#/demos-basic/container.js
API:http://pixijs.download/release/docs/index.html
中文文档:https://www.bookstack.cn/read/LearningPixi/introduction
按照中文文档来基本上可以了解一些关于PIXI的知识,注:如果是在vue中写pixi的话,在通过json加载纹理贴图集的时候,应该把json放在static中否则是加载不出来的
这里现在了一个demo,画栅格,如下图所示
直接先贴上代码
<template> <div class="jsonBox"> <div id="pixi" style="z-index:-1;"></div> </div> </template> <script> //统一配置 let Application = PIXI.Application, Container = PIXI.Container, loader = PIXI.loader, resources = PIXI.loader.resources, TextureCache = PIXI.utils.TextureCache, Sprite = PIXI.Sprite, Rectangle = PIXI.Rectangle; //Create a Pixi Application let app = new Application({ 512, height: 512, antialias: true, transparent: false, resolution: 1, backgroundColor:"0xd1cfcd" }); export default { name: 'jsonBox', data(){ return{ v_appWi:0, v_appHi: 0, site:{ x:500, y:500 }, bgPic:{}, gridSize:50, scale:1, offsetX:0,//场景容器决定定位偏移值 offsetY:0,//场景容器决定定位偏移值 gridAdd:50, sprite_w:140, sprite_h:60, sprite_w1:50, sprite_h1:50, scene_w:window.innerWidth, scene_h:window.innerHeight, }; }, methods: { init_pixi() { this.contain = document.getElementById("pixi"); app.renderer.resize(window.innerWidth, window.innerHeight); this.contain.appendChild(app.view); this.drawGrid() }, //绘制网格 drawGrid(add_w){ let ew=add_w || 0; let color="0xA8ACB5"; let line=new PIXI.Graphics(); console.log(line) console.log(this.scene_w) line.lineStyle(1, color, 1); let canvas_h=this.scene_h ||800; let canvas_w=this.scene_w+ew || 1000; let h_count=Math.floor(canvas_h/this.gridSize); let v_count=Math.floor(canvas_w/this.gridSize); let center_line_h=Math.floor((this.scene_h/2)/this.gridSize); let center_line_v=Math.floor((this.scene_w/2)/this.gridSize); for(let i=-this.gridAdd;i<=h_count+this.gridAdd;++i){ if(i==center_line_h){ line.lineStyle(3,0xFFFFFF,1); line.moveTo(0,i*this.gridSize+this.offsetY); line.lineTo(canvas_w,i*this.gridSize+this.offsetY); line.lineStyle(1, color, 1); continue; } line.moveTo(0,i*this.gridSize+this.offsetY); line.lineTo(canvas_w,i*this.gridSize+this.offsetY); }//画横线 for(let i=-this.gridAdd;i<=v_count+this.gridAdd;++i){ if(i==center_line_v){ line.lineStyle(3,0xFFFFFF,1); line.moveTo(i*this.gridSize+this.offsetX,0); line.lineTo(i*this.gridSize+this.offsetX,canvas_h); line.lineStyle(1, color, 1); continue; } line.moveTo(i*this.gridSize+this.offsetX,0); line.lineTo(i*this.gridSize+this.offsetX,canvas_h); }//画竖线 if(app.stage.children.length==0){ app.stage.addChild(line); } else { app.stage.removeChildAt(0); app.stage.addChildAt(line, 0); } } }, mounted: function() { if (browser.versions.mobile && !browser.versions.iPad) { this.v_appWi = document.getElementById("pixi").offsetWidth; } else { this.v_appWi = Math.min(600, document.getElementById("pixi").offsetWidth); } this.init_pixi(); }, } </script>