因爲項目須要接觸到PIXI這個框架,故開始了一頓打頭操做html
因爲目前PIXI的文檔仍是不多,並且大多數是英文文檔這裏提供幾個PIXI的demo和文檔vue
demo: http://47.99.120.179/pixi/v4/#/demos-basic/container.jsjson
API:http://pixijs.download/release/docs/index.htmlcanvas
中文文檔:https://www.bookstack.cn/read/LearningPixi/introductionapp
按照中文文檔來基本上能夠了解一些關於PIXI的知識,注:若是是在vue中寫pixi的話,在經過json加載紋理貼圖集的時候,應該把json放在static中不然是加載不出來的框架
這裏如今了一個demo,畫柵格,以下圖所示this
直接先貼上代碼spa
<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({ width: 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>