PIXIJS的用法及和canvas区别

首先需要了解PIXI.js 是什么？ 做什么用的？
在网上查了很多资料，但是有关PIXIJS的内容少之又少，下面我来安利一波~

PIXIJS 是基于svg的矢量图，可用来画二维或三维的图形 canvas是HTML5新增的元素，亦可用来画二维图形。

但是区别是 ：
canvas 画出来的图放大会模糊，会有锯齿状的轮廓，并且我认为最重要的一点是，点击画布中的某一个元素的话，无法直接点击，还需要获取鼠标在画布中的位置进行匹配才能覆盖式点击，导致一个比较不好的bug，就是鼠标的位置范围一定是一个矩形，但是如果需要点击的元素目标是一个异形或者不规则图形的时候，那点击的区域就会过大，精确度大大降低。

PXIJS 由于基于svg画出来的图大大减少轮廓锯齿状的特征，并具有抗锯齿的性能属性，图形看上去会清晰很多并且速度也比较快，上述canvas的区域点击问题在PIXI上也得到了很好的处理，不论是什么样的图形，PIXI都会完美精确的点击到其元素本身，不在会有误触的情况

说了这么多，到底PIXIJS 该怎么去使用呢，下面开始介绍他的写法：

1. 安装
   npm install pixi.js
2. 引入
   import * as PIXI from ‘pixi.js’

在页面中你需要的位置插入：

// template
<template>
  <div class="demo">
    <div class="reload-button" @click="initApplication">重绘</div>
    <div class="clear-button" @click="destroy">清空</div>
  </div>
</template>
// js
import * as PIXI from 'pixi.js'

export default {
  data() {
    return {
      app: null,
      bunny: null
    }
  },
  mounted() {
    this.initApplication()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    initApplication() {
      if (this.app) {
      	// 画布重绘
        this.app.destroy(true)
      }
      const app = new PIXI.Application({
        width: document.body.offsetWidth,
        height: document.body.offsetHeight,
        backgroundColor: 0x1099bb,
        antialias: true, // 抗锯齿
        resolution: window.devicePixelRatio || 1 // 根据屏幕的实际分辨率渲染
      })
      document.getElementsByClassName('demo')[0].appendChild(app.view)
      app.stage.sortableChildren = true // 根容器
      this.app = app

      // this.drawGraphics()
      // this.drawText()

      this.drawSprite()
      // this.initDrag()

      // this.drawTilingSprite()
      // this.drawMask()
    },
    drawGraphics() {
      const graphics = new PIXI.Graphics()

      // 线
      graphics.lineStyle(2, 0x0000ff, 1)
      graphics.moveTo(700, 100)
      graphics.lineTo(700, 300)
      graphics.lineTo(600, 300)
      graphics.endFill()

      // 线框
      graphics.lineStyle(2, 0x0000ff, 1)
      graphics.drawRect(10, 150, 100, 100)
      graphics.endFill()

      // 四边形
      graphics.lineStyle(2, 0x0000ff, 1)
      graphics.beginFill(0xde3249)
      graphics.drawRect(10, 300, 100, 100)
      graphics.endFill()

      // 圆形
      graphics.lineStyle(0)
      // graphics.lineStyle(2, 0x0000ff, 1)
      graphics.beginFill(0xde3249, 1)
      graphics.drawCircle(60, 500, 50)
      graphics.endFill()

      // 椭圆
      graphics.lineStyle(2, 0xffffff, 1)
      graphics.beginFill(0xaa4f08, 1)
      graphics.drawEllipse(60, 700, 50, 80)
      graphics.endFill()

      // 圆角矩形
      graphics.lineStyle(2, 0xff00ff, 1)
      graphics.beginFill(0x650a5a, 0.5)
      graphics.drawRoundedRect(200, 150, 200, 100, 16)
      graphics.endFill()

      // 星星
      graphics.lineStyle(2, 0xffffff)
      graphics.beginFill(0x35cc5a, 1)
      graphics.drawStar(250, 350, 5, 50)
      graphics.endFill()

      // 多边形
      const path = [250, 550, 200, 500, 300, 500, 250, 700]
      graphics.lineStyle(0)
      graphics.beginFill(0x3500fa, 1)
      graphics.drawPolygon(path)
      graphics.endFill()

      // 圆弧
      graphics.lineStyle(5, 0xaa00bb, 1)
      graphics.arc(450, 400, 50, Math.PI, 2 * Math.PI)
      graphics.endFill()
      // graphics.arc(300, 100, 50, 2 * Math.PI, (3 * Math.PI) / 2)

      const sprite = PIXI.Sprite.from(require('./assets/bunny.png'))
      graphics.lineTextureStyle(20, sprite.texture)
      graphics.arc(450, 550, 60, 2 * Math.PI, (2.5 * Math.PI) / 2)

      // 贝塞尔曲线
      const bezier = new PIXI.Graphics()
      bezier.lineStyle(4, 0xaa0000, 1)
      bezier.bezierCurveTo(100, 240, 200, 200, 240, 100)
      bezier.endFill()
      bezier.position.x = 350
      bezier.position.y = 150

      this.app.stage.addChild(graphics)
      this.app.stage.addChild(bezier)
    },
    drawText() {
      // 基础文字
      const basicText = new PIXI.Text('我是一本正经的单一颜色的测试文字')

      basicText.position.x = 20
      basicText.position.y = 0

      // 自定义文字样式
      const style = new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 36,
        fontStyle: 'italic',
        fontWeight: 'bold',
        fill: ['#ffffff', '#00ff99'],
        stroke: '#4a1850',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true,
        wordWrapWidth: 440
      })
      const richText = new PIXI.Text('我是一本正经的加了样式的测试文字', style)
      richText.position.x = 20
      richText.position.y = 50
      this.app.stage.addChild(basicText)
      this.app.stage.addChild(richText)
    },
    drawSprite() {
      const bunny = PIXI.Sprite.from(require('./assets/bunny.png'))
      bunny.anchor.set(0.5)
      bunny.x = 600
      bunny.y = 700
      bunny.zIndex = 20

      bunny.interactive = true
      bunny.buttonMode = true
      bunny.on('click', () => {
        bunny.scale.x *= 1.25
        bunny.scale.y *= 1.25
      })

      this.app.stage.addChild(bunny)
      this.app.ticker.add(delta => {
        bunny.rotation += 0.1 * delta
      })
    },
    drawTilingSprite() {
      const textureBg = PIXI.Texture.from(require('./assets/bg.jpg'))
      const textureRoad = PIXI.Texture.from(require('./assets/road.png'))
      let tilingSprite = new PIXI.TilingSprite(textureBg, 800, 200)
      let tilingSpriteRoad = new PIXI.TilingSprite(textureRoad, 800, 68)
      tilingSprite.x = 440
      tilingSprite.y = 30
      tilingSpriteRoad.x = 440
      tilingSpriteRoad.y = 170
      this.app.stage.addChild(tilingSprite)
      this.app.stage.addChild(tilingSpriteRoad)
      this.app.ticker.add(delta => {
        tilingSprite.tilePosition.x -= 1
        tilingSpriteRoad.tilePosition.x -= 4
      })
    },
    drawMask() {
      let colorSprite = PIXI.Sprite.from(require('./assets/your-name.jpg'))
      let blackWhiteSprite = PIXI.Sprite.from(require('./assets/your-name-gray.jpg'))
      let clearSprite = PIXI.Sprite.from(require('./assets/brush2.png'))

      clearSprite.x = 840
      clearSprite.y = 500
      clearSprite.anchor.x = 0.5
      clearSprite.anchor.y = 0.5

      colorSprite.x = 120
      blackWhiteSprite.x = 120

      colorSprite.mask = clearSprite

      this.app.stage.addChild(blackWhiteSprite)
      this.app.stage.addChild(colorSprite)
      this.app.stage.addChild(clearSprite)

      this.app.ticker.add(delta => {
        if (clearSprite.width < document.body.offsetWidth * 3) {
          clearSprite.width += 30
          clearSprite.height += 30
        }
      })
    },
    initDrag() {
      const texture = PIXI.Texture.from(require('./assets/bunny.png'))
      texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST
      const bunny = new PIXI.Sprite(texture)
      bunny.interactive = true
      bunny.buttonMode = true
      bunny.anchor.set(0.5)
      bunny.scale.set(2)

      bunny
        .on('pointerdown', this.onDragStart)
        .on('pointerup', this.onDragEnd)
        .on('pointerupoutside', this.onDragEnd)
        .on('pointermove', this.onDragMove)

      bunny.x = 600
      bunny.y = 700
      bunny.zIndex = 10
      this.app.stage.addChild(bunny)
      this.bunny = bunny
    },
    onDragStart(event) {
      this.bunny.data = event.data
      this.bunny.alpha = 0.5
      this.bunny.dragging = true
    },
    onDragEnd() {
      this.bunny.alpha = 1
      this.bunny.dragging = false
      this.bunny.data = null
    },
    onDragMove(event) {
      if (this.bunny.dragging) {
        const newPosition = this.bunny.data.getLocalPosition(this.app.stage)
        this.bunny.x = newPosition.x
        this.bunny.y = newPosition.y
      }
    },
    destroy() {
      this.app.destroy(true)
      this.app = null
      this.bunny = null
    }
  }
}

抱歉，写的可能有些乱，因为有关PIXIJS的资料文档实在是太少了，大家多多包涵，感兴趣的可以复制下来代码试一下，真的挺惊艳的~