PIXIJS V5简单介绍

·  阅读 3232

注:本文仅简单介绍pixijs在vue中的一些基础使用。

PIXI的引入

npm install pixi.js

import * as PIXI from 'pixi.js'
复制代码

需要注意,pixi4 的参考文章不一定适用于pixi5, 并且以不同方式引入 之后的使用方法也有所不同,最好按照官方文档走

初始化一个 Application

 <div id="px-render"></div>
 
  mounted () {
      this.app = new PIXI.Application({
        width: 300,
        height: 300,
        antialias: true,
        transparent: false,
        resolution: 1,
        backgroundColor: 0x1e90ff
      })

      let dom = document.getElementById('px-render');
      dom.appendChild(this.app.view);
    // this.createVideo();
    
  },
复制代码

初始化一个application,并将其插入到 id='px-render'div块中, 此时我们创建了一个宽高为300px的正方形

在pixi中绘图

      const circle = new PIXI.Graphics();
      circle.beginFill(0xfb6a8f);
      circle.drawCircle(0, 0, 32);
      circle.endFill();
      circle.x = 130;
      circle.y = 130;

      this.app.stage.addChild(circle);
复制代码

在pixi中插入图片并添加动画/事件

        const avatar = new PIXI.Sprite.from(require('./test.jpg'));
        avatar.scale.set(0.5, 0.5);
        // 设置位置为 中心
        avatar.x = this.app.renderer.width / 2;
        avatar.y = this.app.renderer.height / 2;
        // 设置缩放比例为0.5
        avatar.anchor.set(0.5, 0.5);
        // 允许绑定事件
        avatar.interactive = true;
        绑定click事件
        avatar.on('click', () => {
            // 透明度为0.5
            avatar.alpha = 0.5;
        });

        this.app.stage.addChild(avatar);
        // 添加旋转动画
        this.app.ticker.add(() => {
          avatar.rotation += 0.01;
        })
复制代码

在pixijs中插入视频 并控制播放 关闭

      const texture = PIXI.Texture.from(require('./video.mp4'));
      let avatar = new PIXI.Sprite(texture);
      avatar.scale.set(0.5, 0.5);

      let videoSource = texture.baseTexture.resource.source;
      console.warn(texture.baseTexture)

      avatar.interactive = true;

      let pixiBtn = document.getElementById("play");
        let pauseBtn = document.getElementById("pause");
 
        pixiBtn.addEventListener("click", function () {
            videoSource.play();
        });
        pauseBtn.addEventListener("click", function () {
            videoSource.pause()
        });


      avatar.anchor.set(0.5, 0.5);

      this.app.stage.addChild(avatar);
复制代码

参考文章

pixi基础教程

附录 vue文件代码

<template>
  <div class="hello">
      <button id="play">播放</button>
      <button id="pause">暂停</button>
      <button id="create" @click="createVideo">creatVideo</button>
      <button @click="createCircle">画圆</button>
      <button @click="createImg">引入图片</button>

      <button @click="createContainer">容器加载图片</button>

      <button @click="loadImg">load加载图片</button>

      <div id="px-render"></div>

  </div>
</template>

<script>
/*eslint-disable*/
import * as PIXI from 'pixi.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      app: null,
    }
  },
  mounted () {
      this.app = new PIXI.Application({
        width: 300,
        height: 300,
        antialias: true,
        transparent: false,
        resolution: 1,
        backgroundColor: 0x1e90ff
      })

      let dom = document.getElementById('px-render');
      dom.appendChild(this.app.view);
    // this.createVideo();
    
  },
  methods: {
    loadImg () {
      
      let loader = new PIXI.Loader();

      loader.add('bill', 'http://pic.deepred5.com/bilibili.jpg').load(setup);

      loader.onProgress.add((loader) => {
        console.warn('loaderProgress', loader.progress);
      })

      const _this = this;

      function setup() {
        let  bill = new PIXI.Sprite(loader.resources['bill'].texture);
        console.warn(bill)

        bill.width = _this.app.renderer.width / 2;
        bill.height = _this.app.renderer.height / 2;

        _this.app.stage.addChild(bill);
      }
    },

    createContainer() {
    
      let myContainer = new PIXI.Container();

      myContainer.position.set(50, 50);

      let rectangle = new PIXI.Graphics();
      rectangle.beginFill(0x000000);
      rectangle.drawRect(0, 0, 64, 64);
      rectangle.endFill();

      let rectangle2 = new PIXI.Graphics();
      rectangle2.beginFill(0xFFFFFF);
      rectangle2.drawRect(0, 0, 64, 64);
      rectangle2.endFill();

      rectangle2.position.set(20, 20);

      myContainer.addChild(rectangle);
      myContainer.addChild(rectangle2);

      this.app.stage.addChild(myContainer);

    },

    createCircle () {
      const circle = new PIXI.Graphics();
      circle.beginFill(0xfb6a8f);
      circle.drawCircle(0, 0, 32);
      circle.endFill();
      circle.x = 130;
      circle.y = 130;

      this.app.stage.addChild(circle);
    },

    createImg () {
       const avatar = new PIXI.Sprite.from(require('./test.jpg'));
        avatar.scale.set(0.5, 0.5);

        avatar.x = this.app.renderer.width / 2;
        avatar.y = this.app.renderer.height / 2;

        avatar.anchor.set(0.5, 0.5);
        // 绑定事件
        avatar.interactive = true;
        avatar.on('click', () => {
            avatar.alpha = 0.5;
        });

        this.app.stage.addChild(avatar);
        
        this.app.ticker.add(() => {
          avatar.rotation += 0.01;
        })

    },


    createVideo () {

      const texture = PIXI.Texture.from(require('./video.mp4'));
      let avatar = new PIXI.Sprite(texture);
      avatar.scale.set(0.5, 0.5);

      let videoSource = texture.baseTexture.resource.source;
      console.warn(texture.baseTexture)

      avatar.interactive = true;

      let pixiBtn = document.getElementById("play");
        let pauseBtn = document.getElementById("pause");
 
        pixiBtn.addEventListener("click", function () {
            videoSource.play();
        });
        pauseBtn.addEventListener("click", function () {
            videoSource.pause()
        });


      avatar.anchor.set(0.5, 0.5);

      this.app.stage.addChild(avatar);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#px-render {
  margin-top: 20px;
}
</style>

复制代码

文件结构如下

注意

再说一次 不同版本的实现方式可能有区别 不要盲目参考

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改