初識PIXI.js

因爲項目須要接觸到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>
相關文章
相關標籤/搜索