[vue] 11. pixiJS整合vue初体验

1.官方文档地址：

https://pixijs.io/examples/#/demos-basic/container.js

2.安装方法：

npm install --save pixi.js

3.示例代码及其效果：(pixi 5.1.2)

<template>
  <div id="app">
    <div id="pixi" style="z-index:-1;">  </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
import * as PIXI from 'pixi.js'
export default {
  data(){
    return{
    
    };
  },
  components: {
  },
  methods: {
    initPixi() {
      let app = new PIXI.Application({ width:800,height:600,backgroundColor: 0xEF6644 });
      document.getElementById("pixi").appendChild(app.view);
    
      var container=new PIXI.Container();
      container.x = app.screen.width / 2;
      container.y = app.screen.height / 2;
      app.stage.addChild(container)//容器加入舞台
      
     
      for(var i=0;i<7;i++){
        var g=new PIXI.Graphics();
        g.lineStyle(2, 0xFEEB77, 1);
        g.beginFill(0xDE3249)
        g.drawRect((i%5)*50, Math.floor(i/5)*50, 50, 50);//x,y,w,h
        container.addChild(g)
      }

      // for(var i=0;i<25;i++){
      //     var bunny = PIXI.Sprite.from(logo); 
      //     bunny.width=40;//控制精灵大小
      //     bunny.height=40;
      //     bunny.anchor.set(0.5);
      //     bunny.x=(i%5)*40;//控制精灵位置在哪
      //     bunny.y=Math.floor(i/5)*40;
      //     container.addChild(bunny)
      // //注意是加精灵的类实体进去容器，所以精灵要重新建，否则只有一个
      // }
     
      container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
      container.pivot.y = container.height / 2;


      // Listen for animate update
      app.ticker.add(function(delta) {
        // just for fun, let's rotate mr rabbit a little
        // delta is 1 if running at 100% performance
        // creates frame-independent transformation
          //container.rotation += 0.01 * delta;
      }); 
    }
  },
  mounted: function() {
     this.initPixi();
  },
}
</script>

4.试试拖拉拽：

<template>
  <div id="app">
    <div id="pixi" style="z-index:-1;">  </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/111.png'
import * as PIXI from 'pixi.js'
let app = new PIXI.Application({ width:800,height:600,backgroundColor: 0xEF6644 });
let none=new PIXI.Texture.from(logo);
let gogo=new PIXI.Texture.from(logo1);

export default {
  data(){
    return{
        ww:80,//每个格子宽
        hh:50,//每个格子高
        xx:6,//横坐标格子数
        yy:7,//纵坐标格子数
        gap:10//格子间隔
    };
  },
  components: {
  },
  methods: {

    addBox(){
        var x=Math.floor(Math.random()*5)
        var y=Math.floor(Math.random()*5)
        console.log("gogo"+x+" "+y)
        var container=app.stage.getChildAt(0);
      
         container.getChildAt(25+x+y*5).texture=gogo
    },

   
    initPixi() {
      document.getElementById("pixi").appendChild(app.view);
      var container=new PIXI.Container();
      container.x = app.screen.width / 2;
      container.y = app.screen.height / 2;

      app.stage.addChild(container)//容器加入舞台
      
    

      //构造底部网格
      for(var i=0;i<this.xx*this.yy;i++){
        var g=new PIXI.Graphics();
        g.lineStyle(2, 0x000000, 1);
        g.beginFill(0xffffff)
        g.drawRect((i%this.xx)*this.ww, Math.floor(i/this.xx)*this.hh, this.ww, this.hh);//x,y,w,h
        container.addChild(g)
      }
      //构造中间空Texture
      for(var i=0;i<this.xx*this.yy;i++){
         var bunny = PIXI.Sprite.from(none); 
         bunny.width=Math.min(this.ww,this.hh)-this.gap;//控制精灵大小
         bunny.height=Math.min(this.ww,this.hh)-this.gap;
         bunny.x=(i%this.xx)*this.ww+this.ww/2-bunny.width/2;//精灵位置，居中
         bunny.y=Math.floor(i/this.xx)*this.hh+this.hh/2-bunny.height/2;
         bunny.interactive = true;
         bunny.buttonMode = true;
         //bunny.anchor.set(0.5);
         //bunny.on('pointerdown',()=>{ console.log("???"+this.x+" "+this.y);this.texture = gogo;});
         bunny.on('pointerdown',onDragStart)
         .on('pointerup',onDragEnd)
         .on('pointerupoutside',onDragEnd)
         .on('pointermove', onDragMove);
         function onDragStart(event){
          
            // store a reference to the data
            // the reason for this is because of multitouch
            // we want to track the movement of this particular touch
            this.data = event.data;
            this.alpha = 0.5;
            this.dragging = true;
            this.texture = gogo;
            this.orix=this.x
            this.oriy=this.y
         }
         var that=this
         function onDragEnd() {
              this.alpha = 1;
              this.dragging = false;
              // set the interaction data to null
              console.log("x:"+this.x+" y:"+this.y+"::"+that.ww+" "+that.hh+":: "+this.width+" "+this.height)
              this.texture=none

              //根据格子xy嵌合
              if(this.x<=that.xx*that.ww&&this.x>=0&&this.y<=that.yy*that.hh&&this.y>=0){
                  this.x=Math.floor(this.x/that.ww)*that.ww+that.ww/2-this.width/2;
                  this.y=Math.floor(this.y/that.hh)*that.hh+that.hh/2-this.height/2;
                  console.log("after x:"+this.x+" y:"+this.y)
              }

              //判断是否已经有格子了
              var container=app.stage.getChildAt(0);
              var tm=0
              for(var i=0;i<that.xx*that.yy;i++){
                  var t=container.getChildAt(that.xx*that.yy+i)
                  if(t.x==this.x&&t.y==this.y){
                      tm++;
                      if(tm==2){
                          this.x=this.orix
                          this.y=this.oriy
                          console.log("已经有格子了:"+this.data.x)
                          break;
                      }
                      
                  }
              }
               
              this.data = null;
          }
          function onDragMove() {
            if (this.dragging) {
                const newPosition = this.data.getLocalPosition(this.parent);
                this.x = newPosition.x;
                this.y = newPosition.y;
            }
          }
         container.addChild(bunny)
         //boxes.push(bunny)
      }
      container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
      container.pivot.y = container.height / 2;

      


      //构造按钮
      var button=new PIXI.Sprite.from(logo)
      button.x=app.screen.width-100;
      button.y=app.screen.height-100;
      button.height=50;
      button.width=50;
      button.buttonMode = true;
      button.interactive = true;
      button.on('pointerdown',this.addBox);//绑定按钮事件与触发事件
      app.stage.addChild(button)



      // Listen for animate update
      app.ticker.add(function(delta) {
        // just for fun, let's rotate mr rabbit a little
        // delta is 1 if running at 100% performance
        // creates frame-independent transformation
          //container.rotation += 0.01 * delta;
      }); 
    }
  },
  mounted: function() {
     this.initPixi();
  },
}
</script>

5.一个封装较好的拖拉拽，有个经验，看图

<template>
  <div id="app">
    <div id="pixi" style="z-index:-1;">  </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/111.png'
import * as PIXI from 'pixi.js'
let app = new PIXI.Application({ width:1500,height:1500,backgroundColor: 0xffffff });
let none=new PIXI.Texture.from(logo);
let gogo=new PIXI.Texture.from(logo1);

export default {
  data(){
    return{
        ww:80,//每个格子宽
        hh:80,//每个格子高
        numx:6,//横坐标格子数
        numy:7,//纵坐标格子数
        gap:10//格子间隔
    };
  },
  components: {
  },
  methods: {

    addslot(){
        var x=Math.floor(Math.random()*5)
        var y=Math.floor(Math.random()*5)
        console.log("gogo"+x+" "+y)
        var container=app.stage.getChildAt(0);
      
         container.getChildAt(25+x+y*5).texture=gogo
    },

   
    initPixi() {
      document.getElementById("pixi").appendChild(app.view);
      var container=new PIXI.Container();
      container.x = 100;
      container.y = 200;

      app.stage.addChild(container)//容器加入舞台
      
      //文字样式
      var style = {
        fontFamily: 'Arial',
        fontSize: '12px',
        //fontStyle: 'italic',
        fontWeight: 'bold',
        fill: '#000000',
       // stroke: '#4a1850',
       // strokeThickness: 5,
        //dropShadow: true,
        //dropShadowColor: '#000000',
        //dropShadowAngle: Math.PI / 6,
        //dropShadowDistance: 6,
        wordWrap: true, //是否允许换行
        wordWrapWidth: 120, //换行执行宽度
        breakWords: true //支持中文
      }

      //构造底部网格bottom
      var bottom=new PIXI.Container();
      bottom.x=0
      bottom.y=0
      for(var i=0;i<this.numx*this.numy;i++){
        var g=new PIXI.Graphics();
        g.lineStyle(2, 0x000000, 1);
        g.beginFill(0xffffff)
        g.drawRect((i%this.numx)*this.ww, Math.floor(i/this.numx)*this.hh, this.ww, this.hh);//x,y,w,h
        bottom.addChild(g)
      }
      container.addChild(bottom)

      //构造middle容器
      var middle=new PIXI.Container()
      middle.x=600
      middle.y=0
      for(var i=0;i<this.numx*this.numy;i++){
         
         //构造middle的子容器slot
         var slot=new PIXI.Container();
         slot.x=(i%this.numx)*this.ww;
         slot.y=Math.floor(i/this.numx)*this.hh
         slot.interactive=true;
         slot.buttonMode=true;
         slot.on('pointerdown',onDragStart)
         .on('pointerup',onDragEnd)
         .on('pointerupoutside',onDragEnd)
         .on('pointermove', onDragMove);

         //子容器成员：边框
         var g=new PIXI.Graphics()
         g.lineStyle(2, 0x000000, 1);
         g.beginFill(0xffffff)
         g.drawRect(0, 0, this.ww, this.hh);//x,y,w,h
         slot.addChild(g)
         
         //子容器成员：文字
         style.wordWrapWidth=this.ww-30
         var richText = new PIXI.Text('带自定义效d果文本a',style);
         richText.x=0;//子容器成员坐标相对于子容器坐标
         richText.y=0;
         slot.addChild(richText)

         function onDragStart(event){
            //事件中的this相当于event.currentTarget
            this.diff = {x:event.data.global.x-this.x-container.x-this.parent.x,y:event.data.global.y-this.y-container.y-this.parent.y};//解决拖拽时的坐标问题
            this.data = event.data;
            this.alpha = 0.5;
            this.dragging = true;
            this.startpos={x:this.x,y:this.y};//初始坐标存起来
            console.log("开始坐标 x:"+this.x+" y:"+this.y+"误差坐标："+this.diff.x+" "+this.diff.y+" 全局坐标："+event.data.global.x+" "+event.data.global.y)
         }

         var that=this
         function onDragEnd() {
              this.alpha = 1;
              this.dragging = false;
              console.log("当前坐标 x:"+this.x+" y:"+this.y)
              //根据格子xy嵌合
              var dist={x:middle.x-bottom.x,y:middle.y-bottom.y};
              if(this.x+dist.x<=that.numx*that.ww
               &&this.x+dist.x>=0
               &&this.y+dist.y<=that.numy*that.hh
               &&this.y+dist.y>=0){
                  this.x=Math.floor((this.x+this.diff.x+(middle.x-that.numx*that.ww))/that.ww)*that.ww-(middle.x-that.numx*that.ww);
                  this.y=Math.floor((this.y+this.diff.y)/that.hh)*that.hh-0;
                  console.log("最后坐标 x:"+this.x+" y:"+this.y)
              }

              //判断是否已经有格子了
              var tm=0
              for(var i=0;i<that.numx*that.numy;i++){
                  var t=middle.getChildAt(i)
                  if(t.x==this.x&&t.y==this.y){
                      tm++;
                      if(tm==2){
                          this.x=this.startpos.x
                          this.y=this.startpos.y
                          console.log("已经有格子了:"+this.data.x)
                          break;
                      }
                      
                  }
              }
               
              this.data = null;
          }
          function onDragMove() {
            if (this.dragging) {                
                 const newPosition = this.data.getLocalPosition(this.parent);
                 this.x = newPosition.x-this.diff.x;
                 this.y = newPosition.y-this.diff.y;
                console.log("移动坐标 x:"+this.x+" y:"+this.y)
            }
           
          }
        // slot.addChild(bunny)
         middle.addChild(slot)
        
         //slotes.push(bunny)
      }
       container.addChild(middle)
      //container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
      //container.pivot.y = container.height / 2;

      //构造按钮
      var button=new PIXI.Sprite.from(logo)
      button.x=app.screen.width-100;
      button.y=app.screen.height-100;
      button.height=50;
      button.width=50;
      button.buttonMode = true;
      button.interactive = true;
      button.on('pointerdown',this.addslot);//绑定按钮事件与触发事件
      app.stage.addChild(button)

      // Listen for animate update
      app.ticker.add(function(delta) {
        // just for fun, let's rotate mr rabbit a little
        // delta is 1 if running at 100% performance
        // creates frame-independent transformation
          //container.rotation += 0.01 * delta;
      }); 
    }
  },
  mounted: function() {
     this.initPixi();
  },
}
</script>