canvas库:pixi.js

524 阅读3分钟

一:基本用法:

第一步:安装:

    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)的意思就是把图片的中心设置在据他左上角(1000)的位置,如果之前有设置position,是根据(00)的效果,那现在会根据新的原点(1000)去移动
    给一个顶级group设置pivot,让他里面所有的元素和他一起移动:子元素为宽高120的矩形 Group.addChild(createRect(600,45,120,120)),所以中心点应该在(600+120/2,45+120/2),设置Group.pivot.set(660,105);但此时group的起始点在(00),所以要把它移动到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();

中文文档:github.com/Zainking/Le…