一:基本用法:
第一步:安装:
npm i pixi.js -save
第二步:在项目中导入:
import * as PIXI from 'pixi.js';
第三步:创建pixiManager对象管理:
css:
.container{
background-color: #F8F9FE;
display:flex;
flex-direction:column;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
.pixi{
display: flex;
width: 100%;
height: 50%;
}
}
html:
<div class="container" ref="mainContainer">
<div class="pixi" ref="pixi"></div>
</div>
js:
var pixiManager = {
w: PIXI初始宽度,
h: PIXI初始高度,
scale: 1,
init() {
this.app = new PIXI.Application({
width: pixiManager.w,
height: pixiManager.h,
antialias: true, // default: false 反锯齿
resolution:window.devicePixelRatio || 1, // 设备像素比
backgroundColor: 0xfff6db,
});
pixi.value.appendChild(this.app.view);//把canvas插入进pixi
this.createGroups();
},
createGroups() {
// 创建root组
this.rootContainer = new PIXI.Container();
this.app.stage.addChild(this.rootContainer);
},
resize() {
var container = document.querySelector(".pixi");
this.width = container.clientWidth;
this.height = container.clientHeight;
this.app.renderer.resize(this.width, this.height);//重新设置宽高
if (pixiManager.w / pixiManager.h < this.width / this.height) {
// h的减小更多的情况
pixiManager.scale = this.height / pixiManager.h;
} else {
pixiManager.scale = this.width / pixiManager.w;
}
this.rootContainer.scale.set(pixiManager.scale, pixiManager.scale);
this.rootContainer.position.x = this.width/2 - this.rootContainer.width/2;//保持rootContainer缩放后居中
this.rootContainer.position.y = this.height/2 - this.rootContainer.height/2;
},
createImg(url,scaleX,scaleY,posX,posY){//添加图片(url是import的变量名)
const img = PIXI.Sprite.from(url);
//sprite 具有zIndex属性,当容器的sortableChildren=true时所有子元素按照zIndex大小排序
img.scale.set(scaleX, scaleY);
img.position.set(posX, posY);
return img
}
}
onMounted(()=>{
pixiManager.init()
})
window.addEventListener('resize',()=>{
pixiManager.resize()
})
二:其他基本操作
删除元素:app.stage.removeChild(anySprite)
但通常,都会把精灵的visible属性设置成false来让其隐藏:anySprite.visible=false;
清空子元素:node.removeChildren(0)
改变颜色:.tint
改变透明度:.alpha
改变Graphics样式:clear ()
清除绘制到此 Graphics 对象的图形,并重置填充和线条样式设置。
改变文字内容:.text
旋转:绕中心旋转:有两种方式1、anchor, 2、pivot
锚点anchor仅适用于 Sprite
.anchor.set(0.5, 0.5);// 修改旋转中心
.rotation = -1.586;
Graphics没有anchor属性,那我们只能使用pivot,pivot设置了哪个点作为原点,之后旋转,缩放,平移的操作都会以该点为圆心。默认使用左上角来作为原点。默认的值是(0,0)
pivot(100,0)的意思就是把图片的中心设置在据他左上角(100,0)的位置,如果之前有设置position,是根据(0,0)的效果,那现在会根据新的原点(100,0)去移动
给一个顶级group设置pivot,让他里面所有的元素和他一起移动:子元素为宽高120的矩形 Group.addChild(createRect(600,45,120,120)),所以中心点应该在(600+120/2,45+120/2),设置Group.pivot.set(660,105);但此时group的起始点在(0,0),所以要把它移动到pivot那个点上:Group.position.set(660,105);
改变背景颜色:pixiManager.app.renderer.backgroundColor = 0xC71585
找到画布的宽高:pixiManager.app.renderer.view.width
获取全局位置,相对于画布左上角:相对于哪个点这里需要考虑父子关系,多试试就知道到了
-
// Get the global position of an object, relative to the (0,0) of the screen let globalPos = obj.toGlobal(new PIXI.Point(0,0));
取名字
假设当前有child1,child2和parent
parent.child1 = child1;//设置好之后可以通过parent.child1来获取到child1,方便对它控制
三:特殊效果
1.发光效果:
npm install pixi-filters
import { GlowFilter } from '@pixi/filter-glow';
const outlineFilterRed = new GlowFilter({
distance: 30,
outerStrength: 2,
innerStrength: 0.5,
color: colorRGBtoHex(0x5F6FE8),
});
// const fxaa = new filters.FXAAFilter();
wrie1.filters = [outlineFilterRed];
2.渐变效果的三角形:
let triangle = new Graphics();
//创建渐变对象
var gr = context.createLinearGradient(0, 0, 100, 0);
//颜色断点
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//设置渐变
triangle.fillStyle = gr;
triangle.beginFill(0x66FF33);
triangle.drawPolygon(\[
\-32, 64, //First point
32, 64, //Second point
0, 0 //Third point
]);
triangle.endFill();