如何使PIXI渲染器适合浏览器的宽度和高度？

Question

我正在开发一个嵌入Wordpress首页的文字游戏，它使用PIXI.js绘制游戏板及其上方和下方 - 几个jQuery元素，如按钮和selectmenu。

虽然我很顺利，有一个问题，我不知道如何解决和想知道其他PIXI开发人员如何解决它 - 硬编码的画布大小（我已经设置为1020 x 1080）对于某些浏览器来说太大了。

例如，我的Macbook Air上有2个Google Chrome屏幕截图：

此外，我计划在Facebook Canvas中嵌入我的游戏，这将使屏幕空间更加稀缺。

这是我的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);

Answer 1

使用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() ，但我不确定哪一个更正确。

Answer 2

有renderer.resize（） ，但它不会扩展游戏板。

Uisng：

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

效果很好并且可以扩展内容。

另外，我发现jQuery可以调整大小以适应PIXI：

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