PIXIJS的用法及和canvas区别

最新推荐文章于 2025-03-28 11:00:22 发布

爽儿儿儿

最新推荐文章于 2025-03-28 11:00:22 发布

阅读量3k

点赞数 3

分类专栏： vue PIXIJS

本文链接：https://blog.youkuaiyun.com/Shuanger112/article/details/103684894

版权

本文介绍了PIXI.js是一个基于SVG的矢量图库，用于创建二维和三维图形，与HTML5 Canvas相比，它提供更清晰、抗锯齿的图形，并解决了Canvas点击元素的精确性问题。通过示例，展示了如何安装和引入PIXI.js库，以供开发者尝试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

安装
npm install pixi.js
引入
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</

最低0.47元/天解锁文章