初识PIXI.js

由于项目需要接触到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({
  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>