• 初识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({
       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>
  • 相关阅读:
    扑克牌顺子
    数组转 二叉树 ,并且输出二叉树的右视图
    数组中逆序对(归并排序思想)
    链表数字加和
    回文数字
    数组中 只出现一次的数
    判断是否有从根节点到叶子节点的节点值之和等于 sum
    双指针求 3个数和 为0的 数
    vue项目将css,js全部打包到html文件配置
    webpack4配置优化
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/10924176.html
Copyright © 2020-2023  润新知