PixiJs系列實戰課程- 基礎篇-03解決移動端適配

基礎篇

第三章 解決移動端適配

這一章解決橫豎屏保持橫排顯示的方案，打開vscode，啓動項目走起。

第一步，打開resources.js，找到以下代碼

let app = new PIXI.Application({width: 1344, height: 750});
複製代碼

在這句的上面加入動態獲取屏幕可視區域的寬度和高度

const w = document.body.clientWidth,   // 或者  window.innerWidth
          h = document.body.clientHeight;  // 或者  window.innerHeight
let app = new PIXI.Application({width: w, height: h});
複製代碼

第二步，打開index.js，輸入以下代碼

這句話意思是手機若是橫豎屏調換位置的話會自動刷新頁面，爲了讓適配的js再次生效

//判斷手機橫豎屏狀態：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            //豎屏狀態
            location.reload();
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            //橫屏狀態
            location.reload();
        }
}, false);
複製代碼

第三步，打開resources.js，找到以下代碼

loader.once('complete', function(target, resource) {  //加載完成
    document.body.appendChild(app.view)
    
    //初始化場景
      initScenes();
    //初始化精靈
     initSprites();
    //初始化動畫
     initAnimation();
     ！！！！【在這裏添加下面的代碼】！！！
}
loader.load();  // 開始加載資源
複製代碼

這句話就是先判斷寬仍是高是最小值，用最小值除以750（設計稿的寬度），獲得縮放比，而後用縮放比方法舞臺，而且判斷若是寬度小於高度的話就是橫屏，而後旋轉1.57，而且設置舞臺裏旋轉的中心爲0.5，而後設置舞臺的x軸就是寬度

let min = (w<h)?w:h;
let scale = min/750;  // 根據設計稿尺寸進行縮放比例調整
console.log(w,h,min,"放大係數：",scale);
        
 app.stage.scale.set(scale,scale);  // 根據屏幕實際寬高放大舞臺
if (w<h) {   // 根據橫屏豎屏效果旋轉舞臺
    app.stage.rotation = 1.57;
    app.stage.pivot.set(0.5);
    app.stage.x = w;
}else {
   
}

複製代碼

結語

第三章結束，下一章咱們來解決滑動如何控制時間軸的問題。