如何使PIXI渲染器適合瀏覽器的寬度和高度？

我正在研究嵌入在Wordpress首頁的文字遊戲，該遊戲使用PIXI.js繪製遊戲板，並在其上方和下方繪製 - 幾乎沒有像按鈕和選擇菜單這樣的jQuery元素。如何使PIXI渲染器適合瀏覽器的寬度和高度？

雖然我相處得很好，但有一個問題我不知道如何解決並想知道其他PIXI開發人員如何解決它 - 硬編碼的畫布大小（我將它設置爲1020 x 1080）對於某些人來說太大了瀏覽器。

例如這裏有2分谷歌Chrome瀏覽器的截圖在我的MacBook Air：

另外，我打算嵌入我在Facebook的帆布遊戲，這將使屏幕房地產甚至更稀缺。

這是我的JavaScript代碼的摘錄，請問如何改進它？

var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
      view: document.getElementById('board') 
    }); 
    renderer.view.style.padding = '4px'; 
    renderer.backgroundColor = 0xFFFFFF; 

    var charm = new Charm(PIXI); 

    var stage = new PIXI.Sprite(); 
    stage.interactive = true; 
    stage 
      .on('mousedown', onDragStart) 
      .on('touchstart', onDragStart) 
      .on('mousemove', onDragMove) 
      .on('touchmove', onDragMove) 
      .on('mouseup',   onDragEnd) 
      .on('mouseupoutside', onDragEnd) 
      .on('touchend',  onDragEnd) 
      .on('touchendoutside', onDragEnd);

來源

2016-07-30 Alexander Farber

使用window.innerWidth和window.innerHeight，使您的board元素的最佳尺寸。

我的解決方案看起來像這樣（只使用原始的畫布，沒有框架）

var context = document.getElementById('game'); 
function gameResize() 
    { 
    if (window.innerWidth/window.innerHeight > 1280/720) 
     { 
     context.height = window.innerHeight; 
     context.width = 1280*context.height/720; 
     } 
    else 
     { 
     context.width = window.innerWidth; 
     context.height = 720*context.width/1280; 
     } 
    }

您也可以直接更改board大小，並與PIXI renderer.resize()，但我不知道哪一個是比較正確的。

來源

2016-07-30 09:59:27 georgsh

有renderer.resize()，但它並沒有擴展遊戲板。

Uisng：

renderer.view.style.width = ...... + 'px'; 
renderer.view.style.height = ...... + 'px';

運作良好，並縮放內容。

另外，我還發現了jQuery resizable與PIXI很好地工作：

$('#board').resizable({ 
     aspectRatio: 1020/(1020 + 60), 
     minWidth: 1020/2 
});

來源

2016-07-30 17:49:12

如何使PIXI渲染器適合瀏覽器的寬度和高度？

回答

相關問題