关于pixijs使用时遇到的问题

问题1：创建的图形和图片很模糊有锯齿；

解决方案：在创建应用的时候记得设置相关的属性，比如resolution，autoDensity，具体的创建应用方式我封装了个方法，如下

// 创建应用
// document传的是你要画这个应用的元素 比如<div ref='testPage'></div>就传this.$refs.answering
function createApplication (document) {
    const resolution = 2
    let app = new PIXI.Application({
        width: screenW/resolution, // 模糊的处理
        height: screenH/resolution, // 模糊的处理
        backgroundColor: 0xffffff,
        antialias: true,     // 消除锯齿
        transparent: false,  // 背景不透明
        resolution: resolution,       // 像素设置  模糊的处理
        autoDensity: true // 这属性很关键 模糊的处理
    });
    app.renderer.resize(screenW, screenH);
    document.appendChild(app.view)
    return app
}

问题2：怎么绘制渐变色的图形；

解决方案：我就奇怪了，为啥不给个属性来设置渐变色呢；最后实现是通过创建canvas来画的，还是封装了个方法，具体看代码

// 渐变图形
// fromColor起始颜色，toColor终点颜色， width绘制图形的宽度， height绘制图形的高度
function gradient(fromColor, toColor, width, height) {
    const c = document.createElement("canvas");
    c.width = width;
    c.height = height;
    const ctx = c.getContext("2d");
    const grd = ctx.createLinearGradient(0,0,0,h); // 第三个参数有值就是横向渐变，第四个有值就是纵向渐变，其它为0，其它值的情况自己百度了解下就好了
    grd.addColorStop(0, fromColor); //
    grd.addColorStop(1, toColor);
    ctx.fillStyle = grd;
    ctx.fillRect(0,0,width,height);
    return PIXI.Texture.from(c)
}

// 使用
const gradTexture = gradient('#5D87E8', '#203D97', 100, 100)
let rankBlueBg = new PIXI.Sprite(gradTexture)
rankBlueBg.width = 100
rankBlueBg.height = 100
rankBlueBg.position.set(0, 0)

 

问题3：绘制矩形时，如果有画边框，在安卓下会有一条线跑出来(但是圆形不会)，好丑 

解决方案：这个不知道为啥，由于时间问题，最后和产品商量去掉边框线，注释了lineStyle()这一行

// 圆角矩形
btn = new PIXI.Graphics()
// btn.lineStyle(lineStyle.width,lineStyle.color,1) // 边线(宽度，颜色，透明度) 这个在安卓下会有一条线 存在兼容问题 用不了
btn.beginFill(fillColor.color,fillColor.alpha) // 填充
btn.drawRoundedRect(x,y,w,h,r) //x,y,w,h,圆角度数
btn.endFill()
btn.interactive = true // 是否可点击交互

 

问题4：绘制环形的倒计时动画

解决方案：这个官方例子也有，针对我这个答案的倒计时做了个修改（3秒显示题目类型，10秒答题时间）

// 绘制环形倒计时进度条
    generateSpinnerCountDown (position,radius,spinnerColor,endAngle,containerSelf) {
        const container = new PIXI.Container();
        container.position=position
        containerSelf.addChild(container);

        const base = new PIXI.Graphics()
        base.beginFill(spinnerColor);
        base.drawCircle(0,0,radius)
        base.endFill()

        const mask = new PIXI.Graphics();
        mask.position.set(0,0);
        base.mask = mask;

        container.addChild(base);
        container.addChild(mask);

        let phase = 0;
        let time = 28.8
        return (delta) => {
            // Update phase
            if (this.currentShowQustionType) {
                time = 28.74 // 类型3秒 这里根据性能调试了个最佳的值，也就是如果是3秒要绘制完 这里就是28.74 = 3*10 -1.26（有个差值，不然会太快绘制完成）
            } else {
                time = 97 // 答题10秒 这里根据性能调试了个最佳的值
            }
            phase += delta / time;
            phase %= (Math.PI * 2);

            const angleStart = 0 - Math.PI / 2;
            const angle = phase + angleStart;
            const radius1 = radius;
            const x1 = Math.cos(angleStart) * radius1;
            const y1 = Math.sin(angleStart) * radius1;
            // Redraw mask
            if (this.totalTime>0) {
                mask.clear();
                mask.lineStyle(2, 0xff0000, 1);
                mask.beginFill(0xff0000, 1);
                mask.moveTo(0, 0);
                mask.lineTo(x1, y1);
                mask.arc(0, 0, radius1, angleStart, angle, false);
                mask.lineTo(0, 0);
                mask.endFill();
            }
        }
    }

// 使用
const onTick = [
this.generateSpinnerCountDown(new PIXI.Point(x+rectageWidth/2,rectageHeight/2),radius,spinnerColor,endAngle,this.renderTimeContainerSelf)];
this.app.ticker.add((delta) => { // ticker动画
    onTick.forEach((cb) => {
          cb(delta);
    });
});

pixijs demo地址：pixijs.io 

未完待续......