PIXIJS的用法及和canvas区别

首先需要了解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, 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 = 350bezier.position.y = 150this.app.stage.addChild(graphics)this.app.stage.addChild(bezier)},drawText() {// 基础文字const basicText = new PIXI.Text('我是一本正经的单一颜色的测试文字')basicText.position.x = 20basicText.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 = 20richText.position.y = 50this.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 = 600bunny.y = 700bunny.zIndex = 20bunny.interactive = truebunny.buttonMode = truebunny.on('click', () => {bunny.scale.x *= 1.25bunny.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 = 440tilingSprite.y = 30tilingSpriteRoad.x = 440tilingSpriteRoad.y = 170this.app.stage.addChild(tilingSprite)this.app.stage.addChild(tilingSpriteRoad)this.app.ticker.add(delta => {tilingSprite.tilePosition.x -= 1tilingSpriteRoad.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 = 840clearSprite.y = 500clearSprite.anchor.x = 0.5clearSprite.anchor.y = 0.5colorSprite.x = 120blackWhiteSprite.x = 120colorSprite.mask = clearSpritethis.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 += 30clearSprite.height += 30}})},initDrag() {const texture = PIXI.Texture.from(require('./assets/bunny.png'))texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEARESTconst bunny = new PIXI.Sprite(texture)bunny.interactive = truebunny.buttonMode = truebunny.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 = 600bunny.y = 700bunny.zIndex = 10this.app.stage.addChild(bunny)this.bunny = bunny},onDragStart(event) {this.bunny.data = event.datathis.bunny.alpha = 0.5this.bunny.dragging = true},onDragEnd() {this.bunny.alpha = 1this.bunny.dragging = falsethis.bunny.data = null},onDragMove(event) {if (this.bunny.dragging) {const newPosition = this.bunny.data.getLocalPosition(this.app.stage)this.bunny.x = newPosition.xthis.bunny.y = newPosition.y}},destroy() {this.app.destroy(true)this.app = nullthis.bunny = null}}
}

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

PIXIJS的用法及和canvas区别相关推荐

left join 和join区别_sleep、yield、join方法简介与用法 sleep与wait区别多线程中篇
Object中的wait.notify.notifyAll,可以用于线程间的通信,核心原理为借助于监视器的入口集与等待集逻辑通过这三个方法完成线程在指定锁(监视器)上的等待与唤醒,这三个方法是以锁( ...
PHP: 关键字global 和超全局变量$GLOBALS的用法、解释、区别
$GLOBALS 是一个关联数组,每一个变量为一个元素,键名对应变量名,值对应变量的内容.$GLOBALS 之所以在全局范围内存在,是因为 $GLOBALS 是一个超全局变量. php语法中,很多人都 ...
C++中static_cast, dynamic_cast, const_cast用法/使用情况及区别解析
目录第1部分. 隐式类型转换第2部分. 显式类型转换 static_cast dynamic_cast reinpreter_cast const_cast 首先回顾一下C++类型转换: C++类 ...
incident用法_incident与_accident区别
What are the differences about the words 'accident' and incident? I think that the most important di ...
Linux中rename和mv命令用法学习修改文件名区别和总结
如何用命令修改文件名呢?在Linux下可以用rename命令,当然还可以使用mv命令,这里分享下Linux rename命令的用法. 有一部分人说Linux下没有rename命令,建议大家用mv命令. ...
js中的if与Java中的if_JS直接if参数的用法JS中!和!!区别
经常在JS中见一些代码直接if(参数),然后参数调用的时候是将元素自己传下去.例如下面代码: functiontest1(obj){if(obj){ alert($(obj).val()); }els ...
might和could的区别用法_might 与 could区别，谢谢,may和might的区别及用法
may和might的区别及用法:1.表示许可.在表示请求.允许时,might比may语气委婉些.注意:否定回答可用can't或mustn't,表示:不可以.阻止.May I come in? Yes, ...
matlab strfind用法,findstr和strfind区别
matlab中这两个字符串查找的函数findstr(), strfind()表明上看起来用法相似,效果也相似. 一. findstr(s1,s2)--在较长的字符串中查找较短的字符串出现的次数,并返回 ...
item()和items()的用法详解与区别
item() item()的作用是取出单元素张量的元素值并返回该值,保持该元素类型不变. 听起来和使用索引来取值的作用好像一样,接下来我们看一看使用两种方法取元素值的区别: 首先定义一个张量: 1.直 ...

PIXIJS的用法及和canvas区别

PIXIJS的用法及和canvas区别相关推荐

最新文章

热门文章