PIXI屏幕自適應以及強制橫屏

canvas屏幕適配可以用css樣式自適應， 可以設置transform旋轉角度和transfrom-origin:center以中心點旋轉位置以及寬高width和height來實現對canvas的適應，這種適配可適合大部分游戲引擎（沒做測試只是聽說），但是對pixi卻會導致事件響應錯亂，css適應代碼如下：

cssResize(){
        let [canvas,stage] = [this.application.view,this.application.stage];
        let [width,height] = [document.documentElement.clientWidth,document.documentElement.clientHeight];
        let style = "";
        if(width >= height){
            style = `width:${width}px;
                height:${height}px;
                transform:rotate(0deg);
                transform-origin:center;`;
        }
        else{
            style = `width:${height}px;
                height:${width}px;
                transform:rotate(90deg);
                transform-origin:${width/2}px ${width/2}px;`;
        }
        canvas.style = style;
    }

由於pixijs事件問題沒有解決，故想方設法選擇pixijs自適應的另一種解決方法：

以鋪滿寬或高為適配，計算出寬高比率，假如以寬度鋪滿為例，let ratio = canvas.width/clientWidth;height = canvas.height*ratio;下面是強制橫屏的適配方法（注意這個是onresize的回調）：

rendererResize(){
        let stage = this.application.stage;
        let [width,height] = [document.documentElement.clientWidth,document.documentElement.clientHeight];
        let ratio = 1;
        if(width > this.stageWidth || height > this.stageHeight){
            width = this.stageWidth;
            height = this.stageHeight;
        }
        if(width >= height){
            stage.rotation = 0;
            stage.x = 0;
            ratio = width/this.stageWidth;
        }
        else{
            stage.rotation = Math.PI/2;
            stage.x = width;
            ratio = height/this.stageWidth;
        }
        this.application.view.style = `width:${width}px;height:${height}px;`;
        stage.scale.set(ratio);
        this.application.renderer.resize(width,height);
    }

旋轉舞台，同時更改canvas的style.width和style.height，即可實現強制橫屏。

這只是自己寫的一個簡單的適配。