關於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);
    });
});

 未完待續......